CSS 过渡与动画 用法

Question

transition

transition 的展开式属性

1. transition-timing-function : 调速函数，值： ease(默认) 、 ease-in 、 ease-out 、 ease-in-out 、 linear 、 cubic-bezier
2. transition-property ：参与过渡的属性，值： all(默认) 、 transform 、 background

transform

1. transform-origin : 转换源点

animation

animation 的展开式属性

1. animation-duration : 动画执行时间
2. animation-timing-function : 调速函数，值： ease(默认) 、 ease-in 、 ease-out 、 ease-in-out 、 linear 、 cubic-bezier
3. animation-direction : 用来定义是否应该轮流反向播放动画，值：normal(默认)

   

   • reverse : 反转， normal 的反向
   • alternate : 动画轮流反向播放

     

   • alternate-reverse : alternate 的反向
4. animation-play-state : 动画播放状态，值： paused 、 running

cubic-bezier

自定义 调速函数 ，可通过两个控制锚点来指定想要的贝塞尔曲线。在线绘制贝塞尔曲线

比如， ease 等同于 cubic-bezier(.25, .1, .25, 1)

steps

步进函数，把整个动画切分为多个帧，动画在帧与帧之间切换

格式： steps(arg1, arg2)

• arg1 : 步进数
• arg2 : start | end(默认)

  这个参数用于指定动画在每个循环周期的什么位置发生帧的切换动作

@keyframes loader {
    to { background-position: -800px 0; }
}

.loader {
    width: 100px; height: 100px;
    text-indent: 999px;
    background: url(http://dabblet.com/img/loader.png) 0 0;
    animation: loader 1s infinite steps(8);
}

简写属性

1. step-start ：单步切换效果，等同于 steps(1, start)
2. step-end ：单步切换效果，等同于 steps(1, end)

linear-gradient

线性渐变

可作用的属性：background

radial-gradient

径向渐变

可作用的属性：background