<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画简写属性</title>
<style>
key@frames move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
/* linear匀速 延迟时间可以不写,默认为0s */
/* name duration 一定要写 次数可不写默认为一次 */
animation: move 2s linear 1s 1 alternate forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!-- tips -->
<!-- animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者终止状态
1.简写属性里面不包含animation-play-state
2.暂停动画:animation-play-state:puased;进场和鼠标经过等其他配合使用
3.想要动画走回来,而不是直接跳回来:animation-direction:alternate(跑马灯效果)
4.盒子结束后,停在结束位置; animation-fill-mode:forwards;
-->
CSS3_动画简写属性
最新推荐文章于 2022-04-13 10:51:34 发布