H5与C3权威指南笔记--transition动画

translation：过渡

举个栗子：transition: width 1s linear;

transition有三个属性，分别是transition-property, transition-duration,transition-timing-function.

因此上面的代码等价于

　　transition-property: width; 指定要被过渡（改变）的属性

　　transition-duration: 1s; 过渡所需时间

　　transition-timing-function: linear; 过渡所用方法

补充一下： timing也叫做easing，意思是“缓动”。过渡所用方法可以有很多种，也可以自定义方法，具体百度搜索相关工具~

transition可以指定过渡多个属性，逗号隔开。

还要一个额外属性是 transition-delay：秒数； 用于规定动画执行前延迟的时长。

举个栗子??

    .div2{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 200px;
        left: 0;
        background-color: red;
        transform: rotate(0deg);
        transition: left 3s linear, transform 3s linear;
    }
    .div2:hover{
        position: absolute;
        left: 200px;
        transform: rotate(360deg);
    }

<div class="div2"></div>

emmm

效果是动画 不方便在这里展示。

大概就是，先写一个红的小方块，给绝对定位，然后设置旋转度数为0.（设置为0没有效果，是为了给transition提供可写的property值）

然后添加transition效果，transition: left 3s linear, transform 3s linear;

然后

1. 鼠标没悬停 就是一个被绝对定位的小方块。

2.鼠标悬停后，小方块会滚动（360°）到指定位置（left：200px）

3.鼠标移出，以同样的方式滚回原来位置。

over

??

H5与C3权威指南笔记--transition动画

原文：https://www.cnblogs.com/sandraryan/p/10724438.html