css： animation关键帧动画_css 帧动画

一、实现动画的两部分：

1.使用动画首先要定义动画的规则
在@keyframes 中定义规则
2.应用动画元素：指定动画开始、结束以及中间点样式的关键帧

1.@keyframes 中定义规则

 /*首先使用动画  要先定义动画规则*/
        @keyframes mydonghua {
   
            /*简单规则*/
            from{
   
                margin-left: 0;
            }
            to{
   
                margin-left: 50%;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

from与to就是动画的两个关键帧，表示开始时候的关键帧样式以及结束时候的关键帧样式。也可用百分号形式的数来描写关键帧，其中from与0%效果一致，to与100%效果一致。
当有多个关键帧时，设定相应的关键帧即可。例如：0%、25%、50%、75%、100%。

2.应用动画元素

指定动画开始、结束以及中间点样式的关键帧

 /*应用动画的元素*/
 #div1:hover{
   
 /*animation: 动画名称 持续时间 过渡类型 延迟时间 次数 是否停留在终点 往复运动;*/
     animation: mydonghua 2s linear 0.5s 3 forwards  alternate;
        }
1
2
3
4
5
6

效果图：

完整的代码:

	<style>
	 #div1{
   
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background: pink;

        }
        /*首先使用动画  要先定义动画规则*/
        @keyframes mydonghua {
   
            /*简单规则*/
            from{
   
                margin-left: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15