动画
2017-04-18 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
/*给一个元素添加动画只需要两步
1、通过@keyframes自定义一个动画，keyframes跟着的是动画的名称。动画的内容就是from到to的变化
2、在这个元素的里面设置animation-name和animation-duration
animation-name 动画名称
animation-duration 动画时长*/
@keyframes run{
0{
transform: translateX(0px);
}
50%{
transform: translateX(800px);
}
100%{
transform: translateX(100px);
}
}
.redDiv{
width: 200px;
height: 200px;
background-color: red;
font-size: 25px;
color: white;
/*必须属性*/
/*动画名称*/
animation-name: run;
/*动画时长*/
animation-duration: 1s;
/*可选属性*/
/*动画延时几秒开始*/
animation-delay: 0s;
/*动画运动的速度曲线*/
animation-timing-function: linear;
/*动画执行的次数
infinite 无限次*/
animation-iteration-count: 5;
/*动画结束之后停留在什么位置*/
animation-fill-mode: forwards;
/*动画执行的方向
anternate 动画执行的时候1、3、5是正常方向，
2、4、6是反向动画*/
animation-direction: alternate;
/*动画播放的状态，paused 代表暂停*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="redDiv">打野来抓啊</div>
</body>
</html>
