从一个状态,以动画方式变成另一个状态的变化过程
1.transition-duration 持续时间2.transition-delay 延迟时间3.transition-property 属性 表示可过度的样式属性(多个值,用逗号连接)transition-property:all4.transition-timing-function:linear 过度曲线整体设置transition:持续时间 延迟时间 运动曲线(默认ease) 过度属性(all)
1.transition-duration 持续时间
2.transition-delay 延迟时间
3.transition-property 属性 表示可过度的样式属性(多个值,用逗号连接)
transition-property:all
4.transition-timing-function:linear 过度曲线
整体设置
transition:持续时间 延迟时间 运动曲线(默认ease) 过度属性(all)
鼠标移动到圆柱,圆柱发生变化
.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; 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;}
.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;
left: 120px;
transition: .4s;
.line:hover{
height: 200px;
.b{
height: 10px;
border-radius: 50%;
background-color: #333;
bottom: -5px;
.t{
top: -5px;
<div class="box"> <div class="line"> <div class="t"></div> <div class="b"></div> </div></div>
<div class="box">
<div class="line">
<div class="t"></div>
<div class="b"></div>
</div>
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. animation-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:动画名 时间 延迟 动画状态 次数 曲线
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. animation-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:动画名 时间 延迟 动画状态 次数 曲线
<!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: 0.2s;*/ /*动画结束停留位置:backwards起点,forwards终点*/ /*animation-fill-mode: forwards;*/ /*运动次数*/ animation-iteration-count: 4; /*多次运动方向的规则*/ /*alternate:来回*/ /*alternate-reverse:终点开始来回*/ /*animation-direction: alternate-reverse;*/ /*动画状态 running*/ /*animation-play-state: paused;*/ /*整体设置*/ animation: d 1s 2 linear alternate running; } .box:hover{ animation-play-state: running; } /*动画体*/ @keyframes d{ 0%{} 100%{ width: 400px; } } @keyframes second{ 0%{} 100%{} } </style></head><body> <div class="box"></div> </body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
width: 200px;
/*动画样式*/
/*绑定动画名*/
animation-name: wasai;
/*持续时间*/
animation-duration: 1s;
/*延迟时间*/
/*animation-delay: 0.2s;*/
/*动画结束停留位置:backwards起点,forwards终点*/
/*animation-fill-mode: forwards;*/
/*运动次数*/
animation-iteration-count: 4;
/*多次运动方向的规则*/
/*alternate:来回*/
/*alternate-reverse:终点开始来回*/
/*animation-direction: alternate-reverse;*/
/*动画状态 running*/
/*animation-play-state: paused;*/
/*整体设置*/
animation: d 1s 2 linear alternate running;
.box:hover{
animation-play-state: running;
/*动画体*/
@keyframes d{
0%{}
100%{
width: 400px;
@keyframes second{
100%{}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728