css3过渡动画效果

可以用css3设置动画过渡效果,有transition、transition-property、transition-duration、transition-timing-function、transition-delay等几个属性。

transition-property可以设置动画是横着或者是竖着变化。

transition-duration可以设置横着或者是竖着变化完成的时间。

transition-timing-function可以设置动画完成速度快慢。

transition-delay可以设置动画延迟时间。


如以下示例代码:



transition的简写

可以直接写transition: 2s 6s;这样代表transition过渡周期是2s,延迟6s执行过渡效果,即transition简写后面跟的时间,第一个时间是周期,第二个时间是延迟时间,如果只有一个时间,就默认是周期时间。


transition:2s width;3s height;代表过渡是在宽度方向是2s完成过渡,在竖直方向是3s完成过渡。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,818评论 0 11
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 9,332评论 1 13
  • CSS转换 CSS3 Transform(让元素在一个坐标系统中变形,可移动、旋转和缩放元素)transform ...
    Leophen阅读 4,402评论 0 1
  • 从这里开始,我们去开始学习CSS3的变形和动画 变形--旋转 rotate() 旋转rotate()函数通过指定的...
    雨飞飞雨阅读 3,207评论 0 3
  • 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间...
    阿振_sc阅读 4,419评论 1 5