transition、transform、animation

transition

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

其中animate的transition的属性的意思说：当你的left属性发生变化的时候，执行动画效果（仅仅基于left的属性变化，其他的属性不会加入到动画变化里面去）；

实例：

div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

语法

transition: property duration timing-function delay;
值描述
transition-property 规定设置过渡效果的 CSS 属性的名称。(默认值为all)
transition-duration 规定完成过渡效果需要多少秒或毫秒。(默认值为0s)
transition-timing-function 规定速度效果的速度曲线。(默认值为ease函数)
transition-delay 定义过渡效果何时开始。(默认值为0s)

Animation

在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
    left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

语法

animation: name duration timing-function delay iteration-count direction;
值描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。 
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Transform

在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

CSS transform对于程序员来说是一种强大的工具，我会因想到未来这种技术的广泛采用而激动。而用-webkit-transition来让页面元素实现某些动画效果，这则更让人兴奋。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 100px 100px 100px 100px;
        }
        div{
            transition:all 2s ease;
        }
        div:hover{
            transform:scale(2,2);

        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap {
          margin: 100px;
        }
        .wrap:hover .c{
          -webkit-transform: scaleY(2);
        }
        .c {
          display: inline-block;
          width: 50px;
          height: 100px;
          background: green;
        }

        .item {
          transition: all 0.5s ease-in;
        }
        .item2 {
          transition-delay: 0.1s;
        }
        .item3 {
          transition-delay: 0.2s;
        }
        .item4 {
          transition-delay: 0.3s;
        }
    </style>
</head>
<body>
<div class="wrap">
  <div class="c item item1"></div>
  <div class="c item item2"></div>
  <div class="c item item3"></div>
  <div class="c item item4"></div>
</div>
</body>
</html>

 

posted @ 2016-10-04 16:04  chenxj  阅读(148)  评论(0)    收藏  举报