1、transition过渡
将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
- transition——属性名 持续时间 过渡方法
- transition-property —— 属性名|all,即对哪个属性进行变化
- transition-duration —— 持续时间
- transition-timing-function —— 过渡使用的方法(函数) 其取值有linear(匀速)、ease(慢快慢)、ease-in(慢快)、ease-out(快慢)、ease-in-out(慢快慢)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
height: 30px;
width: 150px;
line-height: 30px;
border: 1px solid red;
background-color: yellow;
transition: all 2s linear;
}
div:hover{
color: white;
background-color: #000;
}
</style>
</head>
<body>
<div>你今天开心吗</div>
</body>
</html>
2、animation动画
很多个状态完成过渡,定义动画(使用@keyframes)——调用动画
- animation——名称 时间 方式
- animation-name——引用@keyframes动画的名称
- animation-duration——动画完成时间
- animation-timing-function——规定动画的速度曲线,默认是“ease”
- animation-play-state——表示动画当前播放状态,取值为running|paused
@keyframes mybgcolor{ //定义动画,设置了如下4个关键帧
0%{background-color: red}
30%{background-color: yellow}
60%{background-color: orange}
100%{background-color: white}
}
div:hover{ //调用动画
animation: mybgcolor 5s linear;
}