1、transition-property 过渡属性
默认为all;
也可以为具体的某个属性(attr),如果有多个属性值的情况,就用逗号隔开;
2、transition-duration 过渡时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
background-color: #0f0;
}
.box1{
position: relative;
left:0;
top:0;
width:100px;
height:100px;
background-color: #ff0;
transition-property: top ,left ;
transition-duration: 1s;/* 过渡的时间 */
transition-timing-function: linear ;
}
.box:hover .box1{
left:400px;
top:400px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
3、transition-timing-function 运动形式(速度曲线)
- ease (默认值)慢快慢
- linear 匀速
- ease-in 慢入
- ease-out 慢出
- ease-in-out 慢入慢出
- cubic-bezier 贝塞尔曲线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:None;
width:1000px;
/* height:500px; */
border:5px solid #000;
}
ul:hover li{
left:900px;
}
ul li{
position: relative;
left:0;
width:100px;
height:100px;
background-color: #0f0;
margin-bottom:5px;
transition-duration: 1s;
}
.ease{
transition-timing-function: ease;
}
.linear{
transition-timing-function: linear;
}
.ease-in{
transition-timing-function: ease-in;
}
.ease-out{
transition-timing-function: ease-out;
}
.ease-in-out{
transition-timing-function: ease-in-out;
}
.cubic-bezier1{
transition-timing-function:cubic-bezier(.16,.9,.53,.9)
}
.cubic-bezier2{
transition-timing-function:cubic-bezier(.41,.44,.44,.43)
}
.cubic-bezier3{
transition-timing-function:cubic-bezier(.48,.04,1,.33)
}
.cubic-bezier4{
transition-timing-function:cubic-bezier(.05,1.62,1,.33)
}
.cubic-bezier5{
transition-timing-function:cubic-bezier(.49,-1.03,.21,.79)
}
</style>
</head>
<body>
<ul>
<li class='ease'>ease</li>
<li class='linear'>linear</li>
<li class='ease-in'>ease-in</li>
<li class='ease-out'>ease-out</li>
<li class='ease-in-out'>ease-in-out</li>
<li class='cubic-bezier1'>cubic-bezier1</li>
<li class='cubic-bezier2'>cubic-bezier2</li>
<li class='cubic-bezier3'>cubic-bezier3</li>
<li class='cubic-bezier4'>cubic-bezier4</li>
<li class='cubic-bezier5'>cubic-bezier5</li>
</ul>
</body>
</html>
4、transition-delay 过渡延迟
综合写法
transition:随便结合起来写,但是时间方法,第一个值为过渡时间,第二个值为延迟时间;
5、动画
- animation-name 动画名字
- animation-duration 动画执行时间
keyframes Name:
- animation-iteration-count 动画执行次数
initial/1 默认
infinite 无限循环
Number 执行多少次 - animation-direction:
normal (默认)正常方向
reverse 反方向运行
alternate 动画先正后反方向运行
alternate-reverse 先反后正方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width:800px;
height:400px;
border:5px solid #000;
}
ul li{
list-style:none;
position: relative;
left:0;
top:0;
width:100px;
height:100px;
background-color: pink;
animation-name: abc;
animation-duration: 4s;
animation-iteration-count: 4;
animation-direction:normal;
animation-play-state: running;
}
@keyframes abc{
/* 从哪里来,要到哪里去? */
0{left:0;top:0;}
25%{left:700px;top:0;}
50%{left:470px;top:300px;}
75%{left:364px;top:32px;}
100%{left:0px;top:0;}
}
ul:hover li{
animation-play-state: paused;
}
</style>
</head>
<body>
<ul>
<li>1</li>
</ul>
</body>
</html>
- animation-fill-mode
none (默认)原始状态 -> 动画 -> 原始状态
forwards 原始状态 -> 动画 -> 停在动画帧100%
backwards (忽略原始状态)进入动画帧0% -> 动画 -> 原始状态
both (忽略原始状态)进入动画帧0% -> 动画 -> 停在动画帧10%