<!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>
css3-动画steps等属性
最新推荐文章于 2023-08-10 20:14:15 发布