css3--简单动画

为什么叫简单动画?

因为他只有2个状态:最初状态和末态;想要实现复杂动画就必须要用关键帧keyframes:它可以从a跳到b,从b跳到c,....

须知

  • 1s=1000ms
  • 速度等于位移/时间 v=(200-100)/60

要点

  • transition: 过渡样式 时间 速度 (延时)
  • 常见过渡:ease ease-in ease-out ease-in-out linear matrix
  • transition一定要写在初始态 要有来有回 否则you去无回

动画深刻剖析

  • 淡入淡出 :opacity
  • 展开和收起: width height
  • 位移:top /left/ right /bottom/ margin

雷区

  • var a=.1就是var a=0.1js和java中都可以这么写---》装逼写法
  • transition 默认运动方式就是ease,可以省略,效果一样
  • opacity默认值是1,所以初始状态可以不写出;但是top是auto,所以初始一定要写;
  • transition : all 1s ease;是什么鬼?它是一种偷懒写法,等价于
 transition: 
       width 1s ease,
       height 1s ease;
//初态
.box{
  width:100px;
  height:100px;
 background:red;
 transition: 
       width 1s ease,
       height 1s ease 1s; //最后参数表延时可省略,当它等于前面的动画时间则表示按顺序执行,否则为并发;(平级关系同步执行,延迟稍后执行)
}
//末态
.box:hover{
  width:200px;
  height:200px;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,438评论 0 5
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • transition 语法:transition: property duration timing-functi...
    相关函数阅读 572评论 0 1
  • 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互...
    凯哥学堂阅读 783评论 0 2