1.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画的基本使用</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background:cyan;
animation: run 2s linear 0s 5 alternate forwards;
}
/* webkit:谷歌浏览器 keyframes:帧 */
/* 声明动画*/
@-webkit-keyframes run{
/* from to :从哪到哪 */
from{
left:0px;
border-radius: 0px 0px 0px 0px;
}
to{
left:800px;
border-radius: 100px 100px 100px 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.知识点总结
animation:动画名称 动画总时间 动画速率 动画延迟时间 动画执行次数
animation-name:动画名字,它必须符合命名标识符规范。
animation-duration:动画总时间,单位:[s||ms]。
animation-time-function:动画速率。
animation-deplay:动画延迟时间,这个属性值可以是负数,负数代表动画提前。
animation-iteration-count:动画执行次数[数字或者infinite(无穷大)]
animation-direction:动画是否反向执行。属性值alternate代表反向也算一次动画。
animation-fill-mode:动画执行是否停留在终止地方,属性值是forwards
注意事项:animation的使用与函数十分相似,分为声明和调用。
3.效果图
第一次动画是正方形转变成圆形。第二次动画是圆形转变成正方形…
动画在第5次停止了,因为加了forwards;
有了alternate之后,反向也算一次。
篇章
上一篇:css3教程8-变换
下一篇:css3教程10-实战案例