一、实现动画的两部分:
1.使用动画首先要定义动画的规则
在@keyframes 中定义规则
2.应用动画元素:指定动画开始、结束以及中间点样式的关键帧
1.@keyframes 中定义规则
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
from与to就是动画的两个关键帧,表示开始时候的关键帧样式以及结束时候的关键帧样式。也可用百分号形式的数来描写关键帧,其中from与0%效果一致,to与100%效果一致。
当有多个关键帧时,设定相应的关键帧即可。例如:0%、25%、50%、75%、100%。
2.应用动画元素
指定动画开始、结束以及中间点样式的关键帧
/*应用动画的元素*/
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
效果图:
完整的代码:
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
from{
margin-left: 0;
}
to{
margin-left: 50%;
}
}
#div1:hover{
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
}
</style>
<body>
<div id="div1"></div>
</body>
3.动画属性
animation-name:动画名称
animation-duration:指定动画完成的时间
animation-delay:指定动画开始的延迟时间
animation-iteration-count:指定动画应运行的次数
animation-direction:指定动画是向前播放、向后播放还是交替播放动画
animation-timing-function:指定动画的速度曲线
animation-fill-mode:动画的填充模式
animation:动画的简写。可以将以上几个属性设置为单一属性
4.实现动画的三个必须
1.animation-name:动画名称
2.animation-duration:指定动画完成的时间,因为时间默认为0
3…@keyframes 规则
以上三个,缺少任何一个都不能实现动画效果。
5.animation:动画的简写语法
//animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;
animation: mydonghua 2s linear 0.5s 3 forwards alternate;
6.animation-direction:指定动画是向前播放、向后播放还是交替播放动画
属性:
1.normal : 动画正常播放(向前)。默认值
//normal向前运动
animation: mydonghua 2s linear 0.5s 3 normal;
2.reverse :动画以反方向播放(向后)
//reverse 动画以反方向播放(向后)
nimation: mydonghua 2s linear 0.5s 3 reverse ;
3.alternate :动画先向前播放,然后向后
//alternate :动画先向前播放,然后向后
nimation: mydonghua 2s linear 0.5s 3 alternate ;
4.alternate-reverse :动画先向后播放,然后向前
//alternate-reverse :动画先向后播放,然后向前
nimation: mydonghua 2s linear 0.5s 3 alternate ;
7.animation-timing-function:指定动画的速度曲线
属性:
1.ease: 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
2.linear : 规定从开始到结束的速度相同的动画
3.ease-in : 规定慢速开始的动画
4.ease-out :规定慢速结束的动画
5.ease-in-out: 指定开始和结束较慢的动画
8.animation-fill-mode指定动画的填充模式
在不播放动画时(在开始之前,结束之后,或两者都结束时),animation-fill-mode 属性规定目标元素的样式。
属性值:
1.none 默认值。动画在执行之前或之后不会对元素应用任何样式。
2.forwards 元素将保留由最后一个关键帧设置的样式值,依赖次数和动画方向决定(依赖 animation-direction 和 animation-iteration-count)。此处以3次和alternative为例子。
animation: mydonghua 2s linear 0.5s 3 alternate forwards ;
3.backwards 元素将获取由第一个关键帧设置的样式值,并在动画延迟期间保留该值。依赖 animation-direction
animation: mydonghua 2s linear 0.5s 3 alternate backwards ;
4.both 动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
animation: mydonghua 2s linear 0.5s 3 alternate both;
9.以百分数来描写关键帧
以0%,25%,50%,75%,100%处设置关键帧来改变元素的位置以及背景颜色。
完整代码:
<style>
#div1{
width: 100px;
height: 100px;
border-radius: 50px;
background: pink;
position: absolute;
}
/*首先使用动画 要先定义动画规则*/
@keyframes mydonghua {
/*简单规则*/
0%{
top:0;
left: 0;
background-color: red;
}
25%{
top:100%;
left:25%;
background-color: orange;
}
50%{
top:0;
left: 50%;
background-color: purple;
}
75%{
top:100%;
left: 75%;
background-color: green;
}
100%{
top: 0;
left: 95%;
background-color: blue;
}
}
#div1:hover{
/*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
animation: mydonghua 3s linear 0.5s 3 alternate forwards ;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
效果图: