CSS3使用过度动画和缓动效果案例讲解

更新时间:2023-04-03 21:48:40 阅读：评论：0

transition过渡：

四个小属性

属性意义transition-property哪些属性要过渡transition-duration动画时间transition-timing-function动画变化曲线（中国政法大学是985吗缓动效果）transition-delay延迟时间transition过度属性是css3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画”

兼容性ie10开始兼容，移动端兼容良好曾几何时，网页上的动画特效基本都是由javascript定时器实现的，现在逐步改为使用css3过度优点：动画更细腻，内存开销小transition属性有4个要素：
transition：width 1s linear 0s;（什么属性要过度、动画时长、变化速度曲线军训心得体会800大学、延迟时间）

<!doctype html><htm孤独的小螃蟹的故事l lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画过渡</title>    <style>        .box {            width: 200px;            height: 200px;            background-color: black;            transition: width 5s linear 0s;        }        .box:hover {            width: 500px;        }    </style></head><body>    <div class="box">    </div></body></html>

就是需要过渡的的加属性值transition，第一个值为变化的属性

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius背景颜色和文字颜色都可以被过渡所有变形（包括2d和3d）都可以被过渡

all：

所有的属性都要参与过渡，可以写all
transition：all 5s linear 0s;

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    &l第一次游泳t;meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画过渡</title>    <style>        .box {            width: 200px;            height: 200px;            background-color: black;            transition: width 5s linear 0s;        }        .box:hover {            width: 500px;        }        .box1{            width: 200px;            height: 200px;            background-color: blue;            transition: all 5s linear 0s;        }        .box1:hover {            width: 400px;            height: 200px;            background-color: greenyellow;            border-radius: 50%;       藤县藤州中学 }    </style></head><body>    <div class="box"></div>    <div class="box1"></div></body></html>

过渡的缓动效果：

缓动参数

transition的第三个参数就是缓动参数，也就是变化速度曲线
transition：width 1s linear 0s;

常用的缓动参数

子属性

transition-timing-function：ea；

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta http-equiv="x-ua-compatible" content="ie=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>动画过渡</title>    <style>        * {            margin: 0;            padding: 0;        }        .box1 {            border:1px solid black;        }        .box1 p{            width: 50px;            height: 50px;            background-color: blue;            position: relative;            left: 0;            margin-bottom: 10px;            transition: left 5s linear 0s;        }        .box1 p:nth-child(2) {            transition-timing-function: ea;        }        .box1 p:nth-child(3) {            transition-timing-function: ea-in;        }        .box1 p:nth-child(4) {            transition-timing-function: ea-out;        }        .box1 p:nth-child(5) {            transition-timing-function: ea-in-out;        }        .box1:hover p {            left: 100px;        }    </style></head><body>    <div class="box1">        <p></p>        <p></p>        <p></p>        <p></p>        <p></p>    </div></body></html>