过渡与动画
一、过渡
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>