Basic usage of css3, a must-read for beginners (and comparison of css3 and jquery animation)_html/css_WEB-ITnose

Step one:

Define the animation. The name can be various, just like the method name

1. Define the animation, The name is fadeIn

@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*/}}

方法里面还有很多写法：

如：

/* 定义css方法，名字叫消失 Hides a leaf towards the very end of the animation */@-webkit-keyframes fade{    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */    0%   { opacity: 1; } /*初始状态 透明度为1*/

    95%  { opacity: 1; }/*中间状态 透明度为1*/

    100% { opacity: 0; }/*结尾状态 透明度为0*/

}

/ * The definition method is called drop Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
/* Move a leaf to -300 pixels in the y -axis at the start of the animation */
0% { -webkit-transform: translate(0px, -50px); }/* Initial drop, set the position of the element, the element's x-direction displacement a, y-direction displacement b */
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
100% { -webkit-transform: translate(0px, 1136px); }/* descending At the end, set the position of the element, the element's x-direction displacement a, y-direction displacement b */
}

/* Define a method called clockwise Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{

0% { -webkit-transform: rotate(-50deg); }

100% { -webkit-transform: rotate(50deg); }
}

/* Define a method called counterclockwise Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit -keyframes counterclockwiseSpinAndFlip
{
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale( -1, 1) rotate(-50deg); }
}

th Step 2:

is what is to be executed in the method. There are several keywords for the animation effect: transform transition animation

In fact, the content in these methods must refer to this:

transform

　

rotate

Set the angle of clockwise rotation of the element. The usage is:

transform: rotate(x );

The parameter x must be an angle number ending with deg or 0, and can be a negative number to indicate reverse direction.

　

scale

Set the magnification or reduction factor of the element. Usage includes:

transform: scale(a); The element is scaled in both x and y directions a times

transform: scale(a, b); The element is scaled a times in the x direction and b times in the y direction

transform: scaleX(a); The element is scaled a times in the x direction, y The direction remains unchanged

transform: scaleY(b); The element is scaled b times in the y direction, and the x direction remains unchanged

translate

Set the displacement of the element , the usage is:

transform: translate(a, b); Unchanged

transform: translateY(b); The element is displaced b in the y direction, and the x direction remains unchanged

skew

Set the tilt angle of the element, Usage includes: transform: skew(a, b); The element's x direction is tilted counterclockwise by angle a, and the y direction is tilted clockwise by angle b

transform: skewX(a); The counterclockwise tilt angle a, the y direction remains unchanged

transform: skewY(b); The ending angle number or 0, can be negative to indicate reverse direction.

　

matrix

Set the deformation matrix of the element, because the matrix deformation is too complicated, so we will omit it for now.

　origin

Set the hanging point of the element. Usage includes:

transform-origin: a b; The hanging point of the element is (a, b) The hanging point of an element is the center point of its rotation and tilt. A and b in the value can be a length value, a percentage ending with %, or the four values ​​of left, top, right, and bottom.

transition

　　transition-property

　　指定transition效果作用的CSS属性，其值是CSS属性名。

　　transition-duration

　　动画效果持续的时间，其值为以s结尾的秒数。

　　transition-timing-function

　　指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：

transition-delay

　　动画效果推迟开始执行的时间，其值为以s结尾的秒数。

animation

　　CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key  frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。

　　关键帧@keyframes的语法结构如下：

　　

　　@keyframesNAME {

　　a% {

　　/*CSS属性*/

　　}

　　b% {

　　/*CSS属性*/

　　}

　　...

　　}

　　NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。

　　设置完关键帧后就可以继续设定animation了。

　　animation-name

　　指定选用的动画的名字，即keyframes中的NAME。

　　animation-duration

　　同transition-duration。

　　animation-timing-function

　　同transition-timing-function。

　　animation-delay

　　同transition-delay。

　　animation-iteration-count

　　设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。

　　animation-direction

　　设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。

前缀

　　因为CSS3还没有正式发布，所以各种浏览器对它的支持也不尽相同。所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表示Webkit内核的浏览器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。

第三步：

最后，要给div元素用上：如下

在ID或类中增加如下的动画代码

#box{-webkit-animation-name: fadeIn; /*动画名称*/-webkit-animation-duration: 3s; /*动画持续时间*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/}

通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。

案例：

#leafContainer > div
{
    position: absolute;
    width: 100px;
    height: 100px;
   
    /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */

-webkit-animation-name: fade, drop; /*动画名称*/

    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
    -webkit-animation-timing-function: linear, ease-in;/* 变化速率函数，取的是贝塞尔曲线，这个是匀速，加速 */
}

#leafContainer > div > img {
     position: absolute;
     width: 100px;
     height: 100px;

    

-webkit-animation-name: fade, drop; /*动画名称*/
     -webkit-animation-iteration-count: infinite;/* 设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。 */
     -webkit-animation-direction: alternate;/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
     -webkit-animation-timing-function: ease-in-out; /* 变化速率函数，取的是贝塞尔曲线，这个是加速再减速 */
     -webkit-transform-origin: 50% -100%;/* 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。这里像个钟摆 */
}

有一些参考代码：

代码如下:

　　

< p>

rotate

scale

translate

skew

origin

single property

whole property

change & resume

animation

 

CSS代码：

　　animation.css

　　代码如下:

　　div {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: #06F;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 10px;
margin: 5px;
}

< p>.rotate {
-webkit-transform: rotate(0deg);
}

< p>.rotate:hover {
-webkit-transform: rotate(90deg);
}

< p>.scale {
-webkit-transform: scale(1);
}

< p>.scale:hover {
-webkit-transform: scale(1.5);
}

< p>.translate {
-webkit-transform: translate(0px, 0px);
}

< p>.translate:hover {
-webkit-transform: translate(50px, 50px);
}

< p>.skew {
-webkit-transform: skew(0);
}

< p>.skew:hover {
-webkit-transform: skewY(20deg);
}

< p>.origin {
-webkit-transform-origin: top left;
-webkit-transform: rotate(0);
}

< p>.origin:hover {
-webkit-transform: rotate(45deg);
}

< p>.single {
width: 150px;
}

< p>.single:hover {
background: #f00;
width: 200px;
height: 100px;
line-height: 100px;
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
}

< p>.whole {
width: 150px;
}

< p>.whole:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}

< p>.resume {
width: 150px;
-webkit-transition-duration: 2s;
}

< p>.resume:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}

< p>.animation:hover {
-webkit-animation-name: anim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}

< p>@-webkit-keyframes anim {
0% {
width: 80px;
height: 30px;
line-height: 30px;
background: #06F;
}
50% {
width: 140px;
height: 65px;
line-height: 65px;
background: #360;
}
100% {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
}
}

关于css3动画和jquery的动画的优劣对比：

CSS3 animation provides 2D, 3D and conventional animation attribute interfaces. It can work on any attribute of any element on the page. CSS3 animation is written in C language. It is a system-level animation, so it The efficiency is definitely higher than the animation simulated by js. Is this really the case?
After our testing, we found that there are the following differences between CSS3 animation and javascript simulation animation:


1＼ CSS 3D animation cannot be realized in js;
3D of CSS3 Animation is a very powerful function in CSS3, because it works in a three-dimensional space, so js cannot simulate 3D animation like CSS3. Of course, whether this 3D animation has a wide range of practical application scenarios is worth thinking about... …

2＼ The CSS 2D matrix animation is more efficient than the matrix animation simulated by js using margin and left, top;
The 2D animation of CSS3 refers to the 2D matrix Transform change, such as Scaling\deformation\x-axis\y-axis, of course js cannot do deformation animation. Take coordinate animation as an example. After our testing, we found that using CSS3 transform to do translateXY animation is nearly 700mm faster than position left and position right in js! And it is also much smoother visually than js animation.

3＼ The efficiency of other regular animation properties of CSS3 is lower than the animation simulated by js;
Regular animation properties here refer to: height, width, opacity, border-width, color…..
We once tested changing a DOM element from height:0 to height:100 in Android HTC. We used jQuery animate and CSS3 transition and animation. The results showed that CSS3 tansition and animation were both slow. In jQuery animate 500mm! Other regular animation properties are 400-500mm slower than jQuery animate!.

The above are some simple tests we have done on CSS3 animation and jQuery animation. We hope you can also list your test results in the comments. Next let's take a look at animation events.

Every time an animation is executed on the page, there should be at least two events animationStart and animationEnd. Some may also require animationDuration. We do not recommend animationDuration on mobile phones. The efficiency is already very low. Try not to Other events are also performed during the execution of the animation.

Using js to simulate animation requires developers to write interfaces for these animation events in order to better do the next step, while CSS3 animation does not require developers to write these event interfaces, the browser itself has already provided them Take webkit-based browsers as an example. It provides webkitTransitionStart, webkitTransitionEnd, webkitAnimationStart, webkitAnimationDuration, and webkitAnimationEnd event interfaces. Developers can use these events very conveniently.

Through the above discussion we can find a result:
As for whether to use js animation or css3 animation, developers need to make different choices based on different needs, but a basic principle should be followed:
If you need to do 2D animation, do not necessarily use CSS3 transition or animation.

??

??