一、实现动画的两部分:
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