Introduction to transition and animation properties of css3 animation

This article will introduce to you the transition and animation attributes for realizing CSS3 animation. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

tradition has a total of 4 properties:

• ##transition-property transition property

• Transition-duration The time required to complete the animation, calculated in seconds or milliseconds

• transition-timing-function specifies the animation change speed curve

• transition-delay Whether to delay

transition-property Transition property

none: No properties will be obtained Transition effect

all: All attributes will obtain the transition effect

porperty: width, height...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

The function of transition is to specify the time required for state changes.

img{
    transition: 1s;
}

transition-duration seconds or milliseconds to complete the state transition

You can also specify the change attribute of the transition, such as width change or height

img{
    transition: 1s height;
}

Multiple attributes can also be specified

img{
    transition: 1s height, 1s width
}

transition-delay state change speed.

Specify the delay parameter so that the height changes first, and then the width changes:

img{
    transition: 1s height, 1s 1s width
}

The real meaning of delay is to specify the order in which the animation occurs, so that multiple different Transition can occur at different moments to form an animation effect

transition-timing-function state change speed

The default is to gradually slow down ease

Possible values ​​are

• linear: uniform speed

• easy-in: acceleration

• ease -out: deceleration

• cubic-bezier function, custom speed mode

(cubic: cubic, bezier:

Bezier Er curve)

cubic-bezier (bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8) value range 0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}

Note :Transition requires clear knowledge of the specific values ​​of the start state and end state in order to calculate the intermediate state. But the transition cannot calculate the state of 0->auto, so there will be no animation effect. Similar situations include display: none->block and background:url(foo.jpg)->url(bar.jpg).

It has some disadvantages:

1. Requires event triggering, which cannot occur directly when the web page is loaded

2. It is a one-time event Yes, it cannot happen repeatedly unless you trigger it repeatedly

3. Only the start state and the end state can be defined, and the intermediate state cannot be defined

4. A transition Rules can only define changes to one attribute

animation

CSS Animation has the following attributes:

• animation-name The name that needs to be bound to the selector keyframe

• animation-duration The time required to complete the animation, calculated in seconds or milliseconds

• animation-timing-function specifies the speed curve of the animation

• animaton-delay The delay time before the animation starts

• animation-iteration-count The number of times the animation should be played

• animation-direction Whether the animation should be played in reverse in turn

• animation-fill -mode attribute specifies whether the dynamic effect is visible after the animation is played

• animatoin-play-state specifies whether the animation is running or paused

iteration-repeat

animation-name

animation-duration

首先 设置动画的名称和持续的时长

p:hover{
animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在p元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframs rainbow{
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

keyframs的写法相当自由

可以用from表示0%，to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果忽略某个状态，浏览器会自动推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}

浏览器从一个状态到另外一个状态是平滑过渡到，steps函数实现分步过渡

p:hover {
animation: 1s rainbow infinite steps(10);
}

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

p:hover{
animation: 1s rainbow infinite;
}

除了infinite，还可以设置为具体的次数： 3、5

p:hover{
animation: 1s rainbow 5;
}

animation-fill-mode

动画结束以后会立即冲结束状态回到起始状态，如果想让动画保持在结束状态就要加上animation-fill-mode属性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}

animation-fill-mode 有4种取值

none  不改变默认行为

forawads  动画完成后，保持最后一个属性（在最后一个关键帧中定义）

backwards  在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both  向前向后都进行填充

animation-direction

规定了轮流反向播放动画

alternate：动画会在奇数次（1，3，5...）正常播放，偶数次（2,4,6...）反向播放

最常用alternate和revers，浏览器对其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS3视频教程！

相关推荐：

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

css3特效代码大全

The above is the detailed content of Introduction to transition and animation properties of css3 animation. For more information, please follow other related articles on the PHP Chinese website!