css3中的animation

标签：

不使用js或jquery,用css3实现一张图片的滑动.
我用的是animation来设置所要应用的动画效果，首先在html中写好一个<div></div>,并放置一张图片在div中，然后就这样写css代码，
要注意的是一定不能忘了给div加position: relative和img标签加上position: absolute的属性，否则不会出现效果。这也是我们经常在写一些动画效果时，容易粗心的地方。

.mc:hover img{
    -webkit-animation:myAnimation 1s;//调用自定义动画函数，设置过渡时间为1秒

　　//这个 animation 的过渡，做的是针对于谷歌浏览器的一个兼容，有四个参数，（1）是要参与过渡的属性，（2）过渡持续的时间（单位/s），（3）过渡的类型，（4）延迟过渡的时间

}

@-webkit-keyframes myAnimation{// 自定义动画函数

//从百分之1的时候开始变换到变换到100%的时候结束。translateX（水平方向平移）

　　1%{ 
　　　　 transform:translateX(-845px);//这样就是没写兼容任何浏览器的写法
　　　　　-webkit-transform:translateX(-845px);//这是兼容谷歌浏览器的写法，兼容其他浏览器的无非也就是火狐（-moz-transition）IE（-ms-transition）opera（-o-transition）

    }
    100%{
        transform:translateX(0px);//
        -webkit-transform:translateX(0px);
    }
}

css3中的animation

标签：

原文地址：http://www.cnblogs.com/LingZi-0214/p/5017953.html