Currently I am working on an arrow down animation for a full screen header.
It is almost doing what I want but I just can't set the interval between the animation. It should bounce. Wait a few seconds and then repeat.
.bounce_arrow {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;}
.animated_arrow{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes bounce_arrow {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-10px);}
}
@-moz-keyframes bounce_arrow {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-20px);}
60% {-moz-transform: translateY(-10px);}
}
Just use some time of the animation to do nothing:
eg 2 seconds of interval between:
-moz-animation-duration:4s;
...
@-moz-keyframes bounce_arrow {
0%, 10%, 25%, 40%, 50% {-moz-transform: translateY(0);}
20% {-moz-transform: translateY(-20px);}
30% {-moz-transform: translateY(-10px);}
100% {-moz-transform: translateY(0);} // not realy nedded just to be verbose
}
Use 4s
instead of 2s
divide all percentage by 2, and have no change from 50% till 100%.
For 4 seconds delay, use 6 seconds total and divide all percentage by 3, and so on.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.