过渡与动画

过渡

过渡

过度效果边界问题
鼠标放置临界点来回跳动

解决过渡边界问题
将标签设置为父子标签
在父标签设置一样的宽高



属性
transition-duration: 0.3s;  持续时间     （0可以省略不写）
transition-delay: 1s    延迟时间
transition-property：width  | height | all     过渡样式（默认所有样式都有过渡效果）



第一状态：
    .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition-duration: 0.3s;
        }

第二状态：
    .hover:hover .box {
            width: 150px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            background-color: red;
        }


transition-timing-function 属性 表示过渡运动曲线
transition-timing-function: cubic-bezier(0, 2.32, 1,-2.11);

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()：贝赛尔曲线函数

动画

@keyframes xx {
            0% {}
            100% {
                width: 600px;
            }
        }






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

② animation-duration 属性 表示动画持续时间
animation-duration: <time>;

③ animation-delay 属性 表示动画延迟时间
animation-delay: <time>;

④ 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()：贝赛尔曲线函数

⑤ animation-play-state 属性 表示动画状态
animation-play-state: running | paused
-- running：运行
-- paused：暂停

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

⑦ animation-iteration-count 属性 表示动画次数
animation-iteration-count: <count> | infinite
-- <count>：固定次数
-- infinite：无限次

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