CSS3 Animations (Animations)

CSS3The animation function allows you to create keyframe animations.

Create CSS3Animation

In the previous chapter, you have learned how to perform simple animations, such as through CSS3The transition function animates an attribute from one value to another. However, CSS3过渡几乎无法控制动画如何随着时间进行。

CSS3Transitions are almost impossible to control how the animation progresses over time.

Animation goes further in terms of keyframe-based animation, allowing you to specify the change of CSS properties over time as a set of keyframes, such as Flash animation.

• Creating a CSS animation is a two-step process, as shown in the following example:

• The first step in building a CSS animation is to define each keyframe and name the animation using the keyframe declaration.-The second step is to use animation-name property refers to the keyframe by name and adds animationAnimation propertiesduration and other optional

to specify the behavior of the animation.3However, it is not necessary to define the keyframe rule before referencing or applying the keyframe rule. The following example will show you how to use CSSThe animation function will<div>

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-animation that moves a box from one position horizontally to another.
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-animation that moves a box from one position horizontally to another.
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-name: moveit;
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

@keyframes moveit {-You must specify at least two properties animation-name and animationAnimation propertiesgreater than 0), can perform the animation. However, all other

Not all CSS properties are animatable. Usually, any CSS property that accepts numeric, length, percentage, or color values is animatable.

Define keyframesKeyframes are used to specify the value of animation properties at various stages of the animation. Keyframes are defined using the special-CSS rules10specified by @keyframes. The keyframe selector of the keyframe style rule starts with a percentage (%) or a keyword from (equal to 0%) to to (equal to

The selector is used to specify the position of the keyframe construction during the animation process.10The percentage represents the percentage of the animation duration, 0% represents the start point of the animation,5This means that the 0% represents the end point.2The 0% keyframe in the animation represents the midpoint, etc.5The 0% keyframe will become the midpoint of the animation.1s.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　margin:　100px;
　　　　background: red;
　　　　position: relative;
　　　　left: 0;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

Animation shorthand properties

Many properties need to be considered when creating an animation. However, all animation properties can also be specified in one property to shorten the code.

The animation property is a shorthand property that is used to set all individualAnimation properties.For example:

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation: repeatit　2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit　2s linear 0s infinite alternate;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

CSS3Animation Properties

The following table briefly summarizes all properties related to animations.