css动画属性组要包括变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。

css动画能做什么

动画可以改变element的下列属性

width height padding
background-color/position/size
border-width/radius
box-shadow
color font-size line-height letter-spaceing text-indet text-shadow
transform
opactity (占据空间)

css动画不能做什么

    #container p {
        display: none;
        transition: all 3s ease;
    }
    #container:hover p {
        display: block;
    }
    /**********************/
    #container p {
        height: 0px;
        transition: all 3s ease;
    }
    #container:hover p {
        height: auto;
    }

属性从无到有或到不确定值，动画效果不会生效，因为浏览器不知道如何去做，对于元素从无到有，你可以选择opacity属性来处理。

–

Transform

transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform ： none | [ ]* 也就是： transform: rotate | scale | skew | translate |matrix;

Coordinate

By Convention, positive x values go to the right, and negative vaules go to the left. Similarly, positive y values go downward along the y-axis, while negative values go upward along the y-axis.

Moving an element along with z-axis appears to move it closer or father away.

Speaking of rotations, the other coordinate system used in CSS transforms is spherical system, which is describes angles in 3D space.

2D rotation an actually describes a rotation around the z-axis, in other words rotate(45deg) have the same effect as rotateZ(45deg). Similarly, rotations around the x-axis tilt the element toward or away from you, and rotations around y-axis turn the element from side to side.

Transforming

transform-list

The placeholder refers to a list of one or more transform functions, one after the other, in space seperated format.

#example { transform: rotate(30deg) skewX(-25deg) scaleY(2);}

The functions are processed one at a time, starting with the first(leftmost) and proceding to the last(rightmost). The first-to-last processing order is important, because changeing the order can lead to drastically different results.

img#one {transform: translateX(200px) rotate(45deg);}
img#two {transform: rotate(45deg) translateY(200px);}

Now that when you have a series of transform functions, all of them must be properly formatted, if even one of function is invalid, it renders the entire value invalid.

Transform are not usually cumulative. that is to say, If you apply a transform to an element and then you want to add a transformation, you need to restate the origin transform.

#ex1 {transform: rotate(30deg) skewX(-25deg);}
#ex1 {transform: scale(2);}
#ex2 {transform: rotate(30deg) skewX(-25deg);}
#ex2 {transform: rotate(30deg) skewX(-25deg) scale(2);}

There is an exception to this, which is that annimated transform are additive.

img#one {transformX(100px) scale(1.2)}
img#one:hover {transform: rotate(-45deg);}

Transforms are not applied to “atomic inline-level” boxes.

Understanding 3D Transforms

3D transforms are an extension of 2D transforms. They let you simulate 3D space on a screen by introducing a third axis called the Z axis. The Z axis creates the illusion of depth on a two-dimensional screen. On the Z axis, you can move elements towards or away from the viewer, even rotate and scale them within a 3D perspective.

Activate 3D Space with perspective

Before you can transform an element in 3D, you need to establish a 3D perspective on the page, otherwise your transforms will still appear flat and two-dimensional. To define 3D space, you can use the ‘perspective’ property.

• Perspective is what separates 3D transforms from 2D transforms.
• You define 3D space with the ‘perspective’ property.
• The perspective property creates the illusion of depth; it sets how far away or how close objects appear to us.
• The value for perspective can be set in pixels, em, or rem.
• When you enable 3D space with perspective, the smaller the value, the deeper the perspective; the greater the value, the shallower the perspective.
• A value between 500px and 800px usually renders a realistic perspective.
• If you delete the perspective property at any time, you will lose the 3D effect on your page.

3D Transform properties

• The 3D space you set applies to the direct children only.
• Other deeply nested elements will not live in the same 3D space, so they’ll behave like 2D elements.
• For nested elements to behave like elements in 3D space, pass the 3D space down to them, using transform-style.
• transform-style: preserve-3d; indicates that the children of the element should be positioned in the 3D space.
• By default, the backside of an element is visible when facing the viewer.
• When elements are in 3D space, you can use backface-visibility to control whether or not you see an element’s backside.
• backface-visibility: hidden; hides the backside of a 3D-transformed element.

3-Dimensional Rotations with rotateZ() and rotate3d()

• rotateZ() is a 3D function that rotates elements on the Z-axis.
• With rotate3d(), you can rotate on the X, Y and Z axis at the same time.
• rotate3d() accepts four comma-separated values. *The first three values set the direction of the rotation on the x, y, and z axes; the fourth value sets the rotation angle.

rotate3d(x, y, z, <angle>)

Changing a value from 0 to 1 lets the browser know that you want to rotate the element on that particular axis. For example, this rotates .photo 45 degrees on the X-axis only:

.photo:hover {
  transform: rotate3d(1, 0, 0, 45deg);
}

rotate3d() makes working with 3D rotations convenient because you can efficiently set multiple rotations with one function.

Changing the Viewing Position with perspective-origin

• perspective-origin sets where the viewer sees the objects in 3D space.
• perspective-origin doesn’t do anything by itself; you need to apply the property to the element enabling 3D space.
• perspective-origin accepts two values that set the horizontal and vertical position; the values can be length units, percentages or position keywords.
• The default value for perspective-origin is 50% 50%.
• A horizontal percentage value below 50% moves the origin towards the left.
• A horizontal percentage value over 50% moves the origin towards the right.
• A vertical percentage value lower than 50% moves the origin up from the default center position, while a value higher than 50% moves the origin down.

Creating a Consistent Depth Perspective

3D transformed elements share the same perspective defined in the parent container. Because of this, some elements will have more depth than others, making each transform look different. In this video, we’ll apply 3D perspective directly on single elements to make the rotations consistent.

转换(transition)

transition-property用来声明transition会被应用到的属性。

transition-property: color;

transition-duration用来声明动画持续的时长，可以是s也可以是ms transition-duration: 3s; transition-duration: 3000ms;

transition-timing-function声明了动画的缓动类型，有下面几个选项：

• ease：默认项，动画效果慢慢开始然后加速，到中点后再减速最后缓慢到达终点
• ease-in-out：与ease类似，加减速更柔和一些
• ease-in：加速；开始比较慢，但是加速和停止曲线比较陡峭
• ease-out：减速；开始较快，然后缓慢停止
• linear：匀速；线性平均速率，通常在color和opacity属性的变化上

transition-delay声明了动画延迟开始的时间，很容易理解 transition-delay: 0.5s;

如果你想应用到所有属性，那可以简单写作all，也可以通过none来关闭transition。

#element {
    /* starting state styles */
    color: #F00;
    -webkit-transition: all 3s ease-in-out 0.5s;
    transition: all 3s ease-in-out 0.5s;
}

transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

动画(animation)

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

Configuring the animation

animation-delay: the time between the element being loaded and the start of the animation sequence.

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-fill-mode: sets which values are applied before/after the animation.

Here’s a full list of which values each of these sub-properties can take: