css3动画详解：CSS3过渡属性让你的动画更流畅
css3动画详解：CSS3过渡属性让你的动画更流畅transition:60s; transition-timing-function:steps(60 start); 步进时钟transition-delay设置延迟过渡时间选项 说明 steps(n start) 设置n个时间点，第一时间点变化状态 steps(n end) 设置n个时间点，第一时间点初始状态 step-start 等于steps(1 start)，可以理解为从下一步开始 step-end 等于steps(1 end)，可以理解为从当前步开始<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width init
动画属性
不是所有属性都拥有过渡效果，可支持过度效果的属性
我们看到边框实线 -> 虚线 这个状态是没有过渡效果的
设置元素某些属性应用过渡效果
- all 默认所有属性都发生过渡效果
- 多个属性设置使用 逗号分隔
用于控制过渡结束后执行的JS事件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>transitionend</title>
<style>
*{
padding:0;
margin:0;
}
body{
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
background:#2c3e50;
}
main{
width:100px;
height:100px;
}
div{
position:relative;
width:100px;
height:100px;
}
div::before{
content:"Mondo";
color:#fff;
width:100px;
height:100px;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
background:#1abc9c;
border-radius:10px;
transition-duration:2s;
}
div::after{
content:"imondo.cn";
color:#fff;
position:absolute;
bottom:-40px;
transform:translateX(-1000px)skew(45deg);
transition:.5s;
}
div:hover::before{
transform:rotate(360deg);
}
div.move::after{
transform:translateX(0)skew(0);
}
</style>
</head>
<body>
<main>
<div></div>
</main>
<script>
document.querySelector('div').addEventListener('transitionend' function(e){
console.log(e)
this.classList.add('move')
})
</script>
</body>
</html>
transition-duration
用于设置过渡时间，需要注意以下几点
- 可使用单位为 ms 毫秒、s 秒
- 默认值为 0s 不产生过渡效果
- 一个值时，所有属性使用同样的时间
- 二个值时，奇数属性使用第一个，偶数属性使用第二个
- 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用
transition-property:background width height transform;
transition-duration:200ms 2s;
设置过渡效果的速度，控制运行轨迹
可以参考https://cubic-bezier.com/网站体验效果
步进速度，步进帧动画过渡效果；过渡使用阶梯形式呈现
选项 说明 steps(n start) 设置n个时间点，第一时间点变化状态 steps(n end) 设置n个时间点，第一时间点初始状态 step-start 等于steps(1 start)，可以理解为从下一步开始 step-end 等于steps(1 end)，可以理解为从当前步开始
transition:60s;
transition-timing-function:steps(60 start);
步进时钟
设置延迟过渡时间
- 默认为0s即立刻开始过渡
- 值可以为负数
- 变化属性数量大于时间数量时，后面的属性再从第一个时间开始重复使用
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>纯CSS图片切换</title>
<style>
p{
width:150px;
height:150px;
background:#2980b9;
border-radius:50%;
transition-property:width height background border-radius;
transition-delay:0ms 2s 4s 6s;
transition-duration:2s;
}
p:hover{
width:250px;
height:250px;
border-radius:0;
background:#16a085;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
transition
统一设置过渡规则
- 必须设置过渡时间
- 延迟时间放在逗号或结束前
transition:widthlinear2s
heightease2s2s
backgroundease-in2s4s
border-radius2s6s;
红心点赞
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>红心点赞</title>
<linkhref="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet">
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
background:#34495e;
}
div{
position:relative;
display:flex;
}
i.fa{
position:absolute;
font-size:100px;
transition:1s;
color:#95a5a6;
}
div.hearti.fa:nth-of-type(1){
transform:scale(3);
opacity:0;
color:#e74c3c;
}
div.hearti.fa:nth-of-type(2){
transform:scale(1);
opacity:1;
color:#e74c3c;
}
</style>
</head>
<body>
<div>
<iclass="fafa-heart"></i>
<iclass="fafa-heart"></i>
</div>
<script>
document.querySelector('div').addEventListener('click' function(){
if(this.classList.contains('heart')){
this.classList.remove('heart')
}else{
this.classList.add('heart')
}
})
</script>
</body>
</html>
