您的位置：首页 > Web前端 > CSS

css3-动画steps等属性

2016-11-21 20:28 375 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--------------------------------------动画属性-------------------------------------->

<!--调用*/-->
<!--infinite:无限次*-->
<!--animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行-->
<!--animation: move      1s     alternate    linear 3 ;-->
<!--animation: gun 4s;-->

<!--/* 定义动画*/-->
<!--@keyframes move {
from{
transform: translateX(0px) rotate(0deg) ;
}
to{
transform: translateX(500px) rotate(555deg) ;
}
}-->

<!--/* animation属性详解*/
/* 动画名称*/
animation-name: move;
/* 一次动画持续时间  前两属性是必须，且顺序固定*/
animation-duration: 3s;
/* 动画执行次数  无数次：infinite*/
animation-iteration-count: 1;
/* 动画的方向： normal 正常 ， alternate： 反向*/
animation-direction: alternate;
/* 动画延迟执行*/
/*animation-delay: 1s;*/

/* 设置动画结束盒子盒子的状态
forwards：保持动画结束后的状态
backwards：保持动画开始前的状态
animation-fill-mode:forwards;

/* 运动曲线  linear   ease-in-out  steps()*/
/*animation-timing-function:ease-in;*/-->

<!----------------------------------步长steps------------------------------------------>
<!-- step多长时间走了多少步 根据目标值设定-->
<!--animation:rot 60s steps(60) infinite;-->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航