前端(九)—— 过渡与动画

过渡与动画

一、过渡

1、什么是过渡

从一个状态以动画方式变成另一种状态的这种变化过程就叫做过渡

2、过属性

/*1. transition-property 属性 表示可过渡的样式属性*/
transition-property: all | [css1 [...]];

/*2. transition-duration 属性 表示过渡持续时间*/
transition-duration: <time>;

/*3. transition-delay 属性 表示过渡延迟时间*/
transition-delay: <time>;

/*4. transition-timing-function 属性 表示过渡运动曲线*/
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
     linear:匀速
     ease:慢快慢
     ease-in-out:慢快慢
     easa-in:慢快
     ease-out:快慢
     cubic-bezier():贝赛尔曲线函数(常用)

/*5. transition 属性 表示前四个属性整体赋值,用空格隔开*/
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;

3、案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>过度案例</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border-bottom: 1px solid black;
            position: relative;
        }
        .line {
            width: 30px;
            height: 30px;
            background-color: orange;
            position: absolute;
            bottom: 5px;
            /*top: 270px;*/
            left: 120px;
            transition: .4s;
        }
        .line:hover {
            height: 200px;
        }
        .b {
            width: 30px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            position: absolute;
            bottom: -5px
        }
        .t {
            width: 30px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            position: absolute;
            top: -5px
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="line">
            <div class="t"></div>
            <div class="b"></div>
        </div>
    </div>
</body>
</html>
过渡案例

二、动画

1、动画属性

/*1. animation-name 属性 表示动画名(名字任意起)*/
animation-name: <name>;

/*2. animation-duration 属性 表示动画持续时间*/
animation-duration: <time>;

/*3. animation-delay 属性 表示动画延迟时间*/
animation-delay: <time>;

/*4. animation-timing-function 属性 表示动画运动曲线*/
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
     linear:匀速
     ease:慢快慢
     ease-in-out:慢快慢
     easa-in:慢快
     ease-out:快慢
     cubic-bezier():贝赛尔曲线函数
/*5. animati5.-play-state 属性 表示动画状态*/
animation-play-state: running | paused
     running:运行
     paused:暂停

/*6. animation-fill-mode 属性 表示动画结束后的停留位置*/
animation-fill-mode: forwards | backwards
     forwards:终点 
     backwards:起点

/*7. animation-iteration-count 属性 表示动画次数*/
animation-iteration-count: <count> | infinite
     <count>:固定次数
     infinite:无限次

/*8. animation-direction 属性 表示运动方向*/
animation-direction: normal | alternate | alternate-reverse;
     normal:原起点为第一次运动的起点,且永远从起点向终点运动
     alternate:原起点为第一次运动的起点,且来回运动
     alternate-reverse:原终点变为第一次运动的起点,且来回运动

/*animation 属性 整体设置 用空格隔开*/
animation: <
animation-name> <animation-duration> <animation-iteration-count> <animation-timing-function> <animation-direction>

2、动画体

/*写法一*/
@keyframes <name>{
    /*from未写任何属性设置时,默认全部取初始值(初始状态)*/
    from{}
    to{}
}

/*写法二*/
@keyframes <name>{
    0% {}
    ...
    100% {}
}

3、案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*动画样式*/
        .box {
            /*绑定动画名*/
            /*animation-name: wasai;*/
            /*持续时间*/
            /*animation-duration: 1s;*/
            /*延迟时间*/
            /*animation-delay: .1s;*/
            /*动画结束停留位置:backwards起点 forwards终点*/
            /*animation-fill-mode: forwards;*/
            /*运动次数 infinite无数次*/
            /*animation-iteration-count: 4;*/
            /*多次运动方向的规则*/
            /*alternate:来回*/
            /*alternate-reverse:终点开始来回*/
            /*animation-direction: alternate-reverse;*/quotes: ;
            /*动画状态 running*/
            /*animation-play-state: paused;*/

            /*整体设置*/
            animation: wasai 1s 2 linear alternate;
        }
        .box:hover {
            animation-play-state: running;
        }
        /*动画体*/
        @keyframes wasai{
               0% {

               }
            100% {
                width: 400px;
            }
        }
        @keyframes wasai1{
               0% {}
            100% {}
        }
        @keyframes wasai2{
               0% {}
            100% {}
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
动画案例
原文地址:https://www.cnblogs.com/linagcheng/p/9714224.html