九、动画

https://www.cnblogs.com/qianduanjingying/p/4937574.html

1、CSS3

  • transition: 由事件触发
    transition-property: width(所有css熟悉都可以)
    transition-duration:持续时间
    transition-timing-function:linear、ease、ease-in、cubic-bezier(n,n,n,n)
    transition-delay:等待多久开始
div
{
    width:100px;
    transition: width 2s;
}
  • transform:
    rotate :角度
    scale :规模
    skew :形变
    translate :平移
    matrix:矩阵

  • animation
    animation:
    name : 动画名称
    duration : 动画执行时间
    timing-function :速度曲线
    delay :延迟
    iteration-count :播放次数
    direction:是否反向播放

@keyframes  move{
  form{ left:0px;}   to{ left:200px;}
}
div{animation:move 5s infinite;}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,351评论 0 11
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,904评论 0 4
  • 2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 421评论 0 0
  • CSS3的变形transform、过渡transition、动画animation学习 学习CSS3动画anima...
    yichen_china阅读 3,854评论 0 1
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,465评论 0 5