css3过渡（transition）和动画（animation）变换（transform ）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3过渡（transition）和动画（animation）变换（transform ）相关的知识，希望对你有一定的参考价值。

参考技术A | 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right;/* 设置旋转点，默认是中心点 */

参考

CSS3过渡与动画

一、CSS3 过渡

  • transition-property

　　　规定过渡效果的 CSS 属性名

   -webkit-transition-property: none / all / property;
      -moz-transition-property: none / all / property;
       -ms-transition-property: none / all / property;
        -o-transition-property: none / all / property;
           transition-property: none / all / property;

/*参数说明
- none
- all，默认值
- property(CSS属性名) 例如color、opacity...*/

 

  • transition-duration

　　　规定完成过渡效果需要多少时间

transition-duration: time;

/*参数说明
- 规定完成过渡效果需要花费的时间（以秒或毫秒计）
- 默认值是 0*/

 

  • transition-timing-function

　　　规定速度效果的速度曲线

transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

 

  • transition-delay

　　　定义过渡效果何时开始

transition-delay: time;

/*参数说明
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值是 0*/

 

 

  • transition复合写法

transition: property duration timing-function delay;

 

  • 实际应用

技术图片

div

    width:100px;
    height:75px;
    background:#0b2632;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:ease-in-out;
    transition-delay:0.5s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:0.5s;


div:hover

    width:200px;

 

二、CSS3 动画

  • Keyframes

　　　关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置

@keyframes animationname 
   keyframes-selector 
       css-styles;
   


/*参数说明
 animationname：必写项，定义animation的名称
 keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
 css-styles：必写项，一个或多个合法的CSS样式属性
 @keyframes animationname在style中单独写入
*/

 

  • animation-name

　　　规定需要绑定到选择器的 keyframe 名称

animation-name: keyframename / none;

/*参数说明
 keyframename：指定要绑定到选择器的关键帧的名称；
 none：指定有没有动画（可用于覆盖从级联的动画）
*/

 

  • animation-duration

　　　规定完成动画所花费的时间，以秒或毫秒计

animation-duration: time;

/*参数说明
 time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
*/

 

  • animation-timing-function

　　　规定动画的速度曲线

animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

 

  • animation-delay

　　　规定在动画开始之前的延迟

animation-delay: time;

/*参数说明
 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
 如果值为负，则动画马上开始，但会跳过相应的时间进入动画
*/

 

  • animation-iteration-count

　　　规定动画应该播放的次数

animation-iteration-count: infinite / <number>;

/*参数说明
 <number>为数字，其默认值为“1”；infinite为无限次数循环
*/

 

  • animation-direction

　　　规定是否应该轮流反向播放动画

animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit;

/*参数说明
 normal：正常方向
 reverse：反方向运行
 alternate：先正后反，并持续交替运行（需依赖infinite）
 alternate-reverse：先反后正，并持续交替运行（需依赖infinite）
*/

 

  • animation-fill-mode

　　　规定当动画完成或当动画有延迟未开始播放时，要应用到元素的样式

animation-fill-mode: none / forwards / backwards / both / initial / inherit;

/*参数说明
 none：默认值。不设置对象动画之外的状态
 forwards：设置对象状态为动画结束时的状态
 backwards：设置对象状态为动画开始时的状态
 both：设置对象状态为动画结束或开始的状态
*/

 

  • animation-play-state

　　　规定动画运行或暂停

animation-play-state: paused / running;

/*参数说明
 paused：指定暂停动画
 running：默认值，指定正在运行的动画
*/

 

  • animation

　　　复合写法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

/*参数说明
 默认写在前面的时间为duration
*/

 

  • will-change

　　　增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>;

/*参数说明
 auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
 scroll-position：表示将要改变元素的滚动位置
 contents：表示将要改变元素的内容
 <custom-ident>：明确指定将要改变的属性与给定的名称
 <animateable-feature>：可动画的一些特征值，比如left、top、margin等
*/


兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

 

  • 实际应用

技术图片

div

    width:100px;
    height:100px;
    background:black;

    
div:hover

            animation:myfirst 5s;
         -o-animation:myfirst 5s; /* Opera */
       -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */


@keyframes myfirst

    0%   background:black;
    25%  background:blue;
    50%  background:red;
    100% background:white;


@-moz-keyframes myfirst /* Firefox */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;


@-webkit-keyframes myfirst /* Safari and Chrome */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;


@-o-keyframes myfirst /* Opera */

    0%   background:red;
    25%  background:yellow;
    50%  background:blue;
    100% background:green;

 

以上是关于css3过渡（transition）和动画（animation）变换（transform ）的主要内容，如果未能解决你的问题，请参考以下文章

CSS3过渡与动画

css3过渡（transition）和动画（animation）变换（transform ）

CSS3动画2D3D转换

css3中的过渡效果和动画效果

CSS3-过渡transition

吃透 CSS3 属性： transition过渡 与 transform动画