用@keyframes-animation来实现动画效果_keyframes 旋转

一、使用规则

• @keyframes

        用于定义动画的关键帧。

• animation属性

        用于将@keyframes动画用于元素上。

二、基本语法

• @keyframes

@keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } /*(0%,25%，50%,75%100%)定义了动画的各个阶段*/ } @keyframes Fadeimg{ /*实现动画变淡的过程*/ from{ /*初始状态,类似于0%*/ opacity: 1; } precent{ /*中间状态—50%*/ opacity: 0.5; } to{ /*结束的状态-100%*/ opacity: 0; }

• animation

.box1 img{ width: 100px; height: 100px; border-radius: 50%; position: relative; /*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/ animation: xuanZhuan 10s infinite linear; /*旋转10s,以线性速度无限旋转*/ } .box2{ width: 200px; height: 200px; background-color: #bb2a2ae3; animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/ }

完整代码：

     @keyframes xuanZhuan { /*xuanZhuan是动画名字,实现旋转*/ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } /*(0%,50%,100%)定义了动画的各个阶段*/ } @keyframes Fadeimg{ /*实现动画变淡的过程*/ from{ /*初始状态,类似于0%*/ opacity: 1; } precent{ /*中间状态—50%*/ opacity: 0.5; } to{ /*结束的状态-100%*/ opacity: 0; } } .box{ display: flex; flex-direction: row; } .box1{  width: 300px; height: 300px; } .box1 img{ width: 100px; height: 100px; border-radius: 50%; position: relative; /*animation: 动画名称 持续时间 动画速度曲线 延迟时间 重复次数 动画方向 填充模式;*/ animation: xuanZhuan 10s infinite linear; /*旋转10s,以线性速度无限旋转*/ } .box2{ width: 200px; height: 200px; background-color: #bb2a2ae3; animation: Fadeimg 3s ease-in-out infinite; /* 3秒内淡入淡出，无限循环*/ }  
 
  
 
 
 

动画效果：

/*这个动画效果视频上传后，我这里并没有播放出来*/

媒体1

三、@keyframes 的常见用途

• transform

前三个参数表示旋转轴的向量 ,第四个参数表示旋转的角度。

skewX(x)

代码：

 @keyframes xuanZhuan { 0% { /* 动画的初始状态 */ /*transform: translateX(10px); transform: scale(5, 5); 注意：上面有两个 transform 属性，只有最后一个会生效 */ transform: translateX(10px) scale(5, 5); /* 在 X 轴上平移 10px，并放大 5 倍 */ } 50% { /* 动画进行到 50% 时的状态 */ transform: translateY(10px) rotate3d(1, 1, 1, 360deg); /* 在 Y 轴上平移 10px，并旋转 360 度 */ } 100% { /* 动画的结束状态 */ transform: translate3d(5px, 10px, 5px); /* 在 3D 空间中平移 (5px, 10px, 5px) */ } }

效果：

媒体1

• opacity:控制元素的透明度//这里就不演示了，上面有代码
• background-color：改变背景颜色

……

四、animation属性

• animation-name:指定动画的名称

• animation-duration:指定动画的持续时间，单位为秒或毫秒

• animation-timing-function:指定动画的速度曲线，控制动画的快慢变化。

        1)  linear:匀速

        2）ease:慢快慢（默认值）

        3)   ease-in:慢开始。

        4)   ease-out:慢结束。

        5)   ease-in-out:慢开始和慢结束。

        6)   cubic-bezier(n,n,n,n):自定义速度

• animation-direction:指定动画的播放方向。

        1)normal:正向播放（默认值）

        2)reverse:反向播放

        3)alternate:正向和反向交替播放

        4)alternate-reverse:反向和正向交替播放

• animation-play-state:指定动画的播放状态。

        1)running:动画运行

        2)paused:动画暂停

• animation-fill-mode:指定动画结束后的状态

        1)none:恢复初态

        2)forwards：保留最后一帧的状态

        3)backwards:保留第一帧的状态
        4)both:同时应用forwards和backwards

• animation-iteration-count:指定动画的重复次数。(infinite:无限循环）
• animation-delay:指定动画开始前的延迟时间，单位为秒或毫秒

代码:

.box1 img { width: 100px; height: 100px; border-radius: 50%; position: relative; /*animation: xuanZhuan 10s infinite linear; */ /* 使用 animation 子属性 */ animation-name: xuanZhuan; /* 动画名称 */ animation-duration: 10s; /* 动画持续时间 */ animation-timing-function: linear; /* 动画速度曲线 */ animation-iteration-count: infinite; /* 动画重复次数 */}

李氏酒业