CSS自学笔记（14）:CSS3动画效果

CSS3中新增的动画效果的属性以及主流浏览器支持情况

注：

• IE9以及更早版本不支持这三个新增属性。
• 在Safari浏览器中，需要加(-webkit-)前缀。
• 在Chrome浏览器中，@keyframes和animation属性需要加(-webkit-)前缀。

transition属性

下面是一个简单的CSS样式

img {
    width: 90px;
    height: 90px;
    transition-property: width, height, transform;
    transition-duration: 1s, 1s, 1s;
    transition-timing-function: ease-in-out, ease-in, ease-out;
    transition-delay: 1s, 1s, 0s;
}
img:hover{
    width: 200px;
    height: 200px;
    transform: rotate(90deg);
}

实现效果是当鼠标悬浮在元素(img)上时，他的宽度、高度和方向会发生变化，过渡时间都为1s，过渡方式分别为ease-in-out, ease-in和ease-out，旋转效果会立刻执行，而高宽操作会在1s后变化。

当鼠标移出元素所在范围时，它会逐渐变回原来的样式。

我们也可以transition简写来完成定义上面的样式：

img {
    width: 90px;
    height: 90px;
    transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;
}
img:hover{
    width: 200px;
    height: 200px;
    transform: rotate(90deg);
}

我们还可以通过@keyframes规定来创建动画规则，通常用在较为复杂而又无需用到False动画和JavaScript的地方。

例如下面一个简单的动画效果

部分CSS样式代码为：

#my_animate {
    width: 60px;
    height: 60px;
    background: #060;
    color: #fff;
    position: relative;
    font: bold 12px ‘微软雅黑‘;
    padding: 20px 10px 0px 10px;
    animation: my_animate 5s infinite;
}
@keyframes my_animate {
 0%   {transform: rotate(0deg);left:0px;}
 25%  {transform: rotate(90deg);left:0px;}
 50%  {transform: rotate(0deg);left:400px;}
 55%  {transform: rotate(0deg);left:400px;}
 70%  {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;}
 100% {transform: rotate(-360deg);left:0px;}
}

使用@keyframes创建动画时，需要绑定一个选择器。创建动画时至少要定义动画的名称和动画的时长，这样即可将@keyframes创建动画绑定到相应的选择器上。

若在创建动画时没有定义时长，那么就会取默认值0，就不会执行动画效果。

animation属性以及说明

上面的定义的动画效果是一个周期5s，并且进行无限次的循环播放。在@keyframes中规定了动画的6各阶段的样式，最终形成一个简单的动画效果。