css3帧动画无缝连接（过渡效果和关键帧动画解析）

一2D转换转换的效果是让某个元素改变形状，大小和位置，分为平移translate、缩放scale、旋转rotate和倾斜sknew，我来为大家科普一下关于css3帧动画无缝连接?下面希望有你要的答案，我们一起来看看吧!

css3帧动画无缝连接

一2D转换

转换的效果是让某个元素改变形状，大小和位置，分为平移translate、缩放scale、旋转rotate和倾斜sknew。

使用方法：给元素加样式，transform是样式名，translate、scale、rotate、sknew是样式值。

平移：transform: translate(xpx，ypx);

缩放：transform：scale（x倍数，y倍数）

旋转：transform：rotate（旋转度数deg）

倾斜：transform：sknew（x轴度数deg，y轴度数deg）

二过渡动画

从一种样式逐渐改变为另一种的效果，哪个元素要添加过渡效果就给谁添加这个属性。

使用方法：给元素添加样式，样式名是transtion，transtion是一个复合属性，对应的属性值样式 依次有：

样式名称（transition-property）：规定应用过渡的 CSS 属性的名称。

过度时间（transition-duration）：默认是 0，一般用秒计时。

过渡效果的时间曲线（transition-timing-function）：默认是ease（慢速开始，然后变快，然后慢速结束）；常用的是linear（全程匀速）；也有ease-in（慢速开始），ease（慢速结束），ease-in-out(慢速开始和结束)，但是这几个用到的概率很低。

过渡开始的延迟时间（transition-delay）。

单一样式写法：transition: width 3s linear。

多个样式写法：transition: width 3s linear,height 2s ease,background-color 2s;

所有样式过渡效果一样的写法：transition: all 2s linear

三关键帧动画

1定义关键帧动画

@keyframes secondAnimation { /* from 相当于0%,to相当于100% */ /* secondAnimatio是关键帧动画名字 */ 0%{ background: red; } 30%{ background: yellowgreen; } 65%{ background: hotpink; } 100%{ background: skyblue; } }

2调用关键帧动画

给元素添加样式，样式名是animation，该样式是一个复合属性，对应的属性值依次是：

关键帧动画名（animation-name）：规定 @keyframes 动画的名称

动画时间（animation-duration）：默认是 0，一般用秒计时

动画时间曲线（animation-timing-function）：默认是ease（慢速开始，然后变快，然后慢速结束）；常用的是linear（全程匀速）；也有ease-in（慢速开始），ease（慢速结束），ease-in-out(慢速开始和结束)，但是这几个用到的概率很低

动画开始的延迟时间（animation-delay）。

动画播放的次数（animation-iteration-count）：默认是1，可以定义为n次，infinite是无数次。

动画播放顺序（animation-direction） ：normal 默认值，动画按正常播；reverse 动画反向播放；alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

例如：animation: secondAnimation 8s linear 1s infinite alternate ;

,