Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~
🍇 写在前面
关于transition和animation这两个CSS3属性想必大家都知道，这两个属性都是非常常用的属性，本篇文章来介绍一下关于transition和animation这两个的细节。
ps：本篇文章参考张鑫旭大佬的新书——《CSS新世界》
🍈 transition属性
首先我们来看一下transition属性的一些细节。
🍉 transition-delay传递负值的情况
我们都知道，transition属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性；
当传递两个时间时第一个表示transition-duration，第二个表示transition-delay，MDN中原文如下：
零，一或两个 \<time> 值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给 transition-delay。
例如下面这段代码：
transition: 4s 1s; /* 动画执行4s，延迟1s */
transition: 1.5s .5s; /* 动画执行1.5s，延迟0.5s */
而第二个时间时允许写成负值的，示例代码如下：
transition: 4s -1s; /* 动画执行4s，延迟-1s */
transition: 1.5s -.5s; /* 动画执行1.5s，延迟-0.5s */当第一个时间写成负值时，则会变成延迟时间，第二个变成执行时间，示例代码如下：
transition: -1s 2s; /* 动画执行2s，延迟-1s */而且延迟时间变成负值时，过渡动画的执行也不是从头开始的，而是从过渡动画执行了延迟时间的那一刻开始执行，例如下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>transition负值</title>
<style>
body { margin: 0; }
.box {
height: 100px; width: 200px; background: lightcoral;
transition: 2s -0.5s;
}
.box:hover { width: 600px; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>代码运行结果如下：
我们将鼠标悬停到盒子上时，它的宽度瞬间到了400px，然后执行过渡动画，离开时的效果也一致，这个就是transition-delay属性传递负值的效果
🍊 多余的all
当我们使用transition属性定义过渡动画时，通常是下面这段写法：
transition: all 1.5s .5s;但是在transition-property属性的默认值就是all，所以说我们并不需要编写这个多余的值。
🍋 模拟长时间悬停或长按效果
使用transition属性还有要给SAO操作，可以模拟长按或长时间悬停效果，主要是通过transitionend事件完成，transitionend事件在过渡动画执行完毕后触发，具体可以参考MDN；
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模拟长按和长悬停效果</title>
<style>
button { appearance: none; border: none; outline: none; cursor: pointer; white-space: nowrap; line-height: 40px;width: 80px;height: 40px;color: #fff;background-color: #1171ee;border-radius: 4px;}
button.active {
transition: background-color 1s;
}
.active:hover { background: #3683e9; }
button:active { background: #0d65d8; }
</style>
</head>
<body>
<button id="btn1">悬停</button>
</body>
<script>
const $btn1 = document.getElementById('btn1')
function addClass(e) {
event.target.setAttribute('class', 'active')
}
function removeClass(e) {
event.target.setAttribute('class', '')
}
function AddListener() {
console.log('延迟了1s触发')
}
$btn1.addEventListener('mouseenter', addClass)
$btn1.addEventListener('mouseleave', removeClass)
$btn1.addEventListener('transitionend', AddListener)
</script>
</html>
代码允许效果如下所示：
如果想要实现长按直接换成对应的事件即可。
🍌 animation属性
🍍 @keyframes规则的细节
在定义动画序列时，起始关键帧可以不容设置，默认会采用元素的样式作为起始关键帧，例如这段代码：
.box {
height: 100px;
width: 200px;
background: lightcoral;
opacity: 0.5;
animation: fadeIn 1s infinite;
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}该动画效果就会从透明度50%~100%进行过渡。
关键帧列表可以进行合并且无序，示例代码如下：
@keyframes fadeIn {
0%,
50%,
100% {
opacity: 0;
}
25%,
75% {
opacity: 1;
}
}还有就是动画序列中的是没有意义的，因为动画序列的优先级是最高的。
🍎 animation-iteration-count属性
众所周知，animation-iteration-count属性用于设置动画的执行次数，这个属性可以使用数字作为值，而且可以是小数，比如下面这段代码：
.box {
height: 100px;
width: 200px;
background: lightcoral;
animation: fadeIn 1s 0.5 0.5s both;
}
@keyframes fadeIn {
100% {
opacity: 0;
}
}动画执行效果如下：
延迟0.5秒后，从透明度100%过渡到50%。
🍏 写在最后
本篇文章到这就结束了，如果觉得有用，可以点赞+评论支持一下~~~
