Ik werk alleen aan een geanimeerd hart met CSS.
Ik wil dat het 2 keer pulseert, een kleine pauze neemt en het dan opnieuw herhaalt.
Wat ik nu heb:
small ==> big ==> small ==> repeat animation
Waar ik voor ga:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
Hoe kan ik dat doen?
Mijn code :
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
-webkit-transition: opacity 7s ease-in-out;
-moz-transition: opacity 7s ease-in-out;
-o-transition: opacity 7s ease-in-out;
transition: opacity 7s ease-in-out;}
@keyframes heartFadeInOut {
0% {
opacity:1;
}
14% {
opacity:1;
}
28% {
opacity:0;
}
42% {
opacity:0;
}
70% {
opacity:0;
}
}
#heart img.top {
animation-name: heartFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>Snippet uitvouwen
Antwoord 1, autoriteit 100%
Je kunt de pauze in de animatie opnemen. Vind ik leuk:
@keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
Werkvoorbeeld:
https://jsfiddle.net/t7f97kf4/
Antwoord 2, autoriteit 29%
Puls 2 keer, neem een kleine pauze en herhaal het dan nog een keer
Probeer dit eens. Het gebruik van animatie opacityis een slechte keuze. transform: scale()zal het werk doen.
.heart:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'icons';
font-size: 21px;
text-indent: 0;
font-variant: normal;
line-height: 21px;
}
.heart {
position: relative;
width: 500px;
overflow: inherit;
margin: 50px auto;
list-style: none;
-webkit-animation: animateHeart 2.5s infinite;
animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 120px;
height: 200px;
background: red;
border-radius: 100px 100px 0 0;
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 26%;
-webkit-transform: rotate(45deg) translateZ(0);
transform: rotate(45deg) translateZ(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
@-webkit-keyframes animateHeart {
0% {
-webkit-transform: scale(0.8);
}
5% {
-webkit-transform: scale(0.9);
}
10% {
-webkit-transform: scale(0.8);
}
15% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.8);
}
}
@keyframes animateHeart {
0% {
transform: scale(0.8);
}
5% {
transform: scale(0.9);
}
10% {
transform: scale(0.8);
}
15% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
span {
font-family: 'Cantora One', sans-serif;
font-size: 64px;
position: absolute;
top: 165px;
}<div class="heart">
</div>Snippet uitvouwen
Antwoord 3, autoriteit 18%
Ik vind het antwoord van ketanleuk, maar ik wilde de hartanimatie verbeteren om het realistischer te maken.
p>
- Een hart verdubbelt niet in omvang als het klopt. 10% verandering in maat lijkt me beter.
- Ik vind het leuk om zowel groter en kleiner
- Als het helemaal niet meer beweegt, lijkt het me dood. Zelfs als het niet klopt, moet het een beetje uitzetten of inkrimpen
- Ik heb de code “alternatieve routebeschrijving” verwijderd, zodat deze elke keer op dezelfde manier wordt doorlopen
- Ik heb expliciet het hart begin einde en op normale schaal (1) en heb de animatie in het midden van de reeks. Zo lijkt het me duidelijker.
te worden
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
@keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 2s;
}<div id="heart" >
<img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>Snippet uitvouwen
Antwoord 4, autoriteit 5%
Op basis van verschillende opmerkingen en gebruikmakend van de ♥ krijgen we dit:
body {
font-size: 40pt;
color: red;
}
@keyframes heartbeat {
0% {
font-size: .75em;
}
20% {
font-size: 1em;
}
40% {
font-size: .75em;
}
60% {
font-size: 1em;
}
80% {
font-size: .75em;
}
100% {
font-size: .75em;
}
}
div {
animation: heartbeat 1s infinite;
}<div>
♥
</div>Snippet uitvouwen
Antwoord 5, autoriteit 5%
body{
margin: 0;
padding: 0;
background: #1f1f1f;
}
body:before
{
position: absolute;
content: '';
left: 50%;
width: 50%;
height: 100%;
background: rgba(0,0,0,.2);
}
.center
{
position: absolute;
top:50%;
left: 50%;
background: #1f1f1f;
transform: translate(-50%,-50%);
padding: 100px;
border: 5px solid white;
border-radius: 100%;
box-shadow:20px 20px 45px rgba(0,0,0,.4);
z-index: 1;
overflow: hidden;
}
.heart
{
position: relative;
width: 100px;
height: 100px;
background:#ff0036;
transform: rotate(45deg) translate(10px,10px);
animation: ani 1s linear infinite;
}
.heart:before
{
content: '';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
top:-50%;
left:0;
border-radius: 50%;
}
.heart:after
{
content:'';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
bottom:0;
right:50%;
border-radius: 50%;
}
.center:before
{
content: '';
position: absolute;
top:0;
left:-50%;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
@keyframes ani{
0%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
25%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
30%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
50%{
transform: rotate(45deg) translate(10px,10px) scale(1.2);
}
70%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
90%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
100%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HeartBeat Animation</title>
<link rel="stylesheet" href="Style.css" type="text/css">
</head>
<body>
<div class="center">
<div class="heart">
</div>
</div>
</body>
</html>Snippet uitvouwen
Antwoord 6, autoriteit 3%
Ik denk dat dit is wat je wilt voor je beeldanimatie. Een topafbeelding is niet nodig. Gebruik gewoon de onderkant.
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
@keyframes heartFadeInOut {
0%
{ transform: scale( .5 ); }
20%
{ transform: scale( 1 ); }
40%
{ transform: scale( .5 ); }
60%
{ transform: scale( 1 ); }
80%
{ transform: scale( .5 ); }
100%
{ transform: scale( .5 ); }
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-direction: alternate;
}<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>Snippet uitvouwen
Antwoord 7
Ik had dit nodig voor een project waar ik aan werkte. Ik probeerde het er zo realistisch mogelijk uit te laten zien, en dit is wat ik bedacht.
@keyframes heartbeat {
0% {
transform: scale( .95 );
}
20% {
transform: scale( .97 );
}
30% {
transform: scale( .95 );
}
40% {
transform: scale( 1 );
}
100% {
transform: scale( .95 );
}
}
animation: heartbeat 1s infinite;