这篇文章主要介绍了css3怎么实现动画只循环一次的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css3怎么实现动画只循环一次文章都会有所收获,下面我们一起来看看吧。
css3动画只循环一次用“animation-iteration-count”属性设置,该属性可以规定动画的执行次数,当该属性的值为1时,可设置动画只循环一次;语法“元素{animation-iteration-count:1;}”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3动画只循环一次用animation-iteration-count
属性设置。
animation-iteration-count属性可以规定动画的执行次数,定义动画应该播放多少次。
当该属性的值为1时,可设置动画只循环一次。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 1;
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 1;
}
@keyframes mymove {
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes mymove{
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
关于“css3怎么实现动画只循环一次”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“css3怎么实现动画只循环一次”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。