用户:102325821/css动画

单纯用CSS玩点花活，记下来

过渡 transition

1. transition: property duration timing-function delay
   1. transition: 属性是个复合属性（多个属性用，分隔transition:background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;）
   2. transition-property: 规定设置过渡效果的 css 属性名称
      1. transition-property: none |all |property;值为 none 时, 没有属性会获得过渡效果;值为 all 时, 所有属性都将获得过渡效果;
         1. color : background-color, border-color, color, outline-color ;
         2. length : 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
         3. integer : 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor()转换为整数时发生 如: outline-offset,z-index
         4. number : 真实的（浮点型）数值, 如:zoom,opacity,font-weight
         5. rectangle : 通过x, y, width 和 height（转为数值）变换，如: crop
         6. visibility : 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
         7. shadow : 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
         8. background-image : 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画。
   3. transition-duration: 规定完成过渡效果需要多少秒或毫秒
   4. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线
      1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
      2. 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1)
   5. transition-delay: 指定开始出现的延迟时间

transition:width 2s;

关键帧动画 animation

1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。

语法

1. animation: name duration timing-function delay iteration-count direction;
   1. animation-name 规定需要绑定到选择器的 keyframe 名称
   2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
   3. animation-timing-function 规定动画的速度曲线。 默认是 "ease"。
   4. animation-delay 规定动画何时开始 。 默认是 0。
   5. animation-iteration-count 规定动画被播放的次数 。 默认是 1。
   6. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。（animation-iteration-count 取值大于1时设置有效）
2. animation-play-state 规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。
3. animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
   1. none：不改变默认行为 (默认, 回到动画没开始时的状态) 。
   2. forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
   3. backwards：在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
   4. both：向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。

animation

forwards

1111111

变形 transform

旋转 rotate

rotate(45deg)

缩放 scale

scale(0.5)

倾斜 skew

skew(-30deg)

移动 translate

translate(100px)

1. transform-origin属性改变变形的基准点
   1. 用法: transform-origin: 10px 10px;
   2. 第二个参数可用left、center、right，第二个参数可用top、center、bottom。
2. 多方法组合变形
   1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
   2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行