1、定义运动规则 keyframes关键帧 name名字
2、定义运动规则 keyframes关键帧 run名字 from 从什么时候开始 to 到什么时候结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#jrt{
width: 400px;
height: 300px;
background: blue;
/*animation 动画片制作 run 移动*/
/*animation: run 3s;*/
/*linear是匀速 0.5s延迟时间 循环次数3 后面改成infinite就是无限次循环*/
/*参数：要绑定的运动名称，运动持续时间 ,运动曲线,延迟时间,重复次数,是否轮流反向播放动画*/
/*animation: run 3s linear 0.5s 3;*/
animation: run 3s infinite;
}
/*定义运动规则 keyframes关键帧 name名字*/
/*@keyframes name{
}*/
/*定义运动规则 keyframes关键帧 run名字 from 从什么时候开始 to 到什么时候结束*/
/* @keyframes run{
from{
width: 300px;
height: 150px;
}
to{
width: 900px;
height: 500px;
}
}*/
/*也可以用百分比来表示 这个50% 是上面时间3s的50%*/
@keyframes run{
0%{
width: 300px;
}
50%{
width: 900px;
}
100%{
width: 300px;
}
}
</style>
</head>
<body>
<div id="jrt">
</div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7493.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知