css矢印アニメーション
1757 ワード
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
// infinite ,
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
//
@keyframes bounceRight {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
80% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
}
.bounceRight {
-webkit-animation-name: bounceRight;
animation-name: bounceRight;
}
//
@keyframes bounceLeft {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
80% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
}
.bounceLeft {
-webkit-animation-name: bounceLeft;
animation-name: bounceLeft;
}
//
@keyframes bounceDown {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
80% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
}
}
.bounceDown {
-webkit-animation-name: bounceDown;
animation-name: bounceDown;
}