zoukankan      html  css  js  c++  java
  • CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核

    浏览器 内核名称
    W3C  
    IE  -ms-
     Chrome/Safari -webkit- 
     Firefoc -moz- 
     opera -o- 

    区别:

    transition是过度属性,需要用户自行触发,触发时间比如:点击,鼠标悬浮等

    animation是动画属性,其不需要用户触发,网页加载完成后自动执行

    使用:

    transation{过度属性 过度时间 动画类型 延迟时间}

    -o-transation{过度属性 过度时间 动画类型 延迟时间}

    -ms-transation{过度属性 过度时间 动画类型 延迟时间}

    -moz-transation{过度属性 过度时间 动画类型 延迟时间}

    -webkit-transation{过度属性 过度时间 动画类型 延迟时间}

    @keyframes 动画名称{

      0%{css属性列表}

      ......

      100%{css属性列表}

    }

    @-o-keyframes 动画名称{

      0%{css属性列表}

      ......

      100%{css属性列表}

    }

    @-ms-keyframes 动画名称{

      0%{css属性列表}

      ......

      100%{css属性列表}

    }

    @-moz-keyframes 动画名称{

      0%{css属性列表}

      ......

      100%{css属性列表}

    }

    @-webkit-keyframes 动画名称{

      0%{css属性列表}

      ......

      100%{css属性列表}

    }

    div{

      animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

      -o-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

      -ms-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

      -moz-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

      -webkit-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;

    }

  • 相关阅读:
    gitbook 入门
    mac 手动卸载软件位置
    idea 版本控制忽略文件、文件夹设置
    Mac .DS_Store 隐藏文件和清理.DS_Store的方法
    mac 打开整个系统的隐藏文件
    js拼接字符串,字符串转数组
    新一代 javascript 模板引擎:artTemplate-3.0
    webpack+express多页站点开发
    Vue2学习笔记:组件(Component)
    Vue2学习笔记:过渡效果css
  • 原文地址:https://www.cnblogs.com/caoruiy/p/4603934.html
Copyright © 2011-2022 走看看