html动画箭头,css箭头动画

.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;

}