页面的建造中,常常操纵到animation和transition完成页面交互动画效果,到达页面最好的视觉效果,不只能够使页面加倍活泼,还能够提拔用户的界面体验,从而增长网站的浏览量。
浏览器的兼容性,IE10、Firefox 另有 Opera 均支撑 animation 属性,
营销型网站公司,Safari 和 Chrome 是支撑替换的 -webkit-animation 属性,然则IE9 和更早的版本不支撑 animation 属性。transition现代浏览器基础上都支撑,然则IE10以下的版本不支撑。
animation 和 transition 的用法
animation:
animation-name : 设置动画的称号;animation-duration:设置动画完成的时光animation-timing-function:设置动画的速率曲线范例;animation-delay:设置动画耽误时光; animation-interation-count:设置动画播放的次数;animation-direction: 设置是不是轮番反向播放动画; animation-play-state:设置动画正在播放照旧停息;animation-fill-mode:设置动画播放之前或以后,动画效果是甚么状况的;
transition:
transition- property:设置过渡效果的属性称号;transition- duration:设置过渡效果的时光,这个时光是必需要设置的,不然时光为0,动画就不会播放了;
transition- timing-function:设置速率效果的速率曲线范例;transition-delay 设定过渡效果的耽误时光;
用transition做过渡的效果,用法很矫捷,能轻松完成的效果多重多样。如用Transition 完成的hover效果:
以下图所示:
Html:
Css:
关于loading的用animation做的动画效果:
以下图1所示:
Html:
Css:
以下图2所示:
Html
Css: