一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 ;
,
