CSS过渡 和 CSS动画

CSS3中出现很多新的特性，其中比较好玩的3D操作就是： 过渡和动画效果。

 

相似：

animation属性类似于 transition，都是随着时间元素的属性值

 

区别：

它们主要区别在于： transition 需要触发一个事件才会随着时间改变其CSS属性；animation 在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

1）、动画不需要事件触发， 过渡需要。

2）、过渡只有一组关键帧，对应 开始-结束 这一过程；

         动画可以设置多个；

 

过渡（transition）

     过渡就是使瞬间的样式变化，按照一定方式变得缓慢平缓；

     例如，鼠标划过超链接时颜色的变化，

                点击按钮后的颜色变化等，

p:hover {
    color: red;
}

p {
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

 

 

一共四个值，功能基本都是字面翻译的意思：

      transition-property 执行过渡的属性，例如本例中 color；

      transition-duration 过渡的时间，单位是秒， 不设置的话默认0s, 即无过渡效果；

     transition-timing-function 设置过渡的变化方式，默认是 ease ，即速度由慢到快再到慢，常用的还有linear，线性速度变化均匀。

     transition-delay 延迟时间  即多少秒后执行过渡效果，默认 0s，不延迟；

 

一般使用快捷写法：

p {
    transition: color 2s linear 0;
}
/*最少要指定过渡时间*/
p {
    transition: 2s;
}

 

p {
    transition: color 2s linear,
                font-size .5s,
                background: 1s;
}

 

由于是新特性，为了兼容性需要加上浏览器厂商前缀：

p {
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
}

 

 

动画（animation）

CSS3的动画是个很不错的技术，基本能取代一些动画， JavaScript， flash等；

而动画里最重要的概念就是关键帧。

实现CSS动画需要设置关键帧，@keyframes：

@keyframes my-animation {
    0% {
        color: red;
    }
    50% {
        color: green;
    }
    100% {
        color: blue;
    }
}

@keyframes 跟的是自定义的动画名称

 动画内容中的百分比是关键帧对应的样式，

如果只需要首尾两个关键帧，可以这样写，

@keyframes my-animation {

   from {
        color:green;
   }

   to {
         color:blue;
   }
}

 

定义好了关键帧后，就直接再需要应用动画的元素标签内使用就行了，格式及所有属性如下：

p {
    animation-name: my-animation;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-play-state: running;
}

 

 

发现了吧，很多属性和transition 里面一样，简单介绍下：

      animation-name  动画名称

     amination-duration  动画时间

     animation-timing-function 动画方式

     animation-delay  动画延迟

 

     animation-iteration-count  动画次数 默认为1     一般设置为 infinite，即无限循环；

 

     animation-direction  normal 为默认  正向播放     reverse 为反向播放  alternate为正向后反向    alternate-reverse为反向后正向 ；

     animation-play-state    播放状态   默认running  运行    paused 暂停    可以再JavaScript中使用 对动画进行控制

 

当然，动画属性也有简便写法

p {
    animation: my-animation 3s linear infinite alternate;
}

其中 animation-name 和 animation-duration 为必须设置的属性；

同样，记得考虑浏览器兼容：

@-webkit-keyframes mycanimation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}
p {
    -webkit-animation: my-animation 3s linear infinite;
}
/* -moz-, -ms-, -o- 格式类似 */