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

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 ;

,