css3中的animation

时间:2022-01-31 14:43:07
不使用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);    }}