首页手记 CSS3 animate,transform,and...

CSS3 animate,transform,and transition

标签：

CSS3

animate

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.

CSS animations 让CSS样式间的配置渐变成为可能。包含两部分：一个描述CSS动画的样式和一个指示动画样式起止的关键帧及可能的中间路线点

There are three key advantages to CSS animations over traditional script-driven animation techniques:

They're easy to use for simple animations; you can create them without even having to know JavaScript.
The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

CSS animation优于脚本驱动动画的三个关键点如下：

易用
运行效果好
让浏览器控制动画序列，让浏览器通过例如减少在当前不可见的选项卡中运行的动画的更新频率来优化性能和效率。

配置

main-properties：keyframes
sub-properties：
- animation-delay: 延迟
- animation-direction: 起点及自我重复的方向
- animation-duration ：动画周期持续时间
- animation-iteration-count：重复次数
- animation-name:动画名
- animation-play-state:动画播放状态
- animation-timing-function:动画轨迹曲线
- animation-fill-mode：动画执行前后应用的值

定义动画

示例：Making text slide across the browser window

/*Adding another keyframe*/
75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
p {
  animation-duration: 3s;
  animation-name: slidein;
/*Making it repeat*/
animation-iteration-count: infinite;
/*Making it move back and forth*/
animation-direction: alternate;
/*shorthand*/
animation: 3s infinite alternate slideIn;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed.

改变CSS视觉模式的坐标空间，可让元素转变，旋转，缩放，扭曲

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Live examples

p {
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 0 -250px;

  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}

Using CSS transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

CSS transitions提供了一个控制改变CSS属性的动画速度的方式

注意：The set of properties that can be animated is subject to change. Developers should proceed with caution.

<body>
    <p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
    <div class="box">Sample</div>
</body>
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}