一.过渡属性
过渡属性（all) 过渡持续时间 0s延迟 贝塞尔曲线
transition: all .3s 0s linear;
CSS3的过渡属性可以定义元素在不同状态之间的过渡效果，使得页面呈现出更流畅、更生动的动画效果。例如，当鼠标悬停在某个元素上时，该元素的颜色、大小或位置等属性可能会发生变化，通过过渡属性，这些变化可以平滑地进行，而不是突然地跳跃
CSS3的过渡属性包括
transition-property、transition-duration、transition-timing-function和transition-delay。其中，transition-property用于指定参与过渡的属性，可以是具体的属性名，也可以是all（表示所有可以进行过渡的属性）或none（表示不指定过渡的属性）。transition-duration用于设置过渡效果的时间长度。transition-timing-function用于定义过渡效果的速度曲线。transition-delay用于设置过渡效果的延迟时间
{
width: 100px;
height: 100px;
background-color: red;
/* 过渡属性（all) 过渡持续时间 0s延迟 贝塞尔曲线 */
transition-property: width;
transition-duration: .5s;
/* 贝塞尔曲线属性 */
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
/* 延迟过渡 */
transition-delay: 0s;
}
// 简写
{
transition: width .3s 0s linear;
}
document.querySelector('.box-2').addEventListener('transitioned',function(){
console.log('过渡结束');
})过渡属性用途广泛，在移动端滑块验证时，就可以用到，当用户未移动到指定位置松手，就会过渡属性回到原来位置
//过渡属性
.ulBox li.active{
transition: width .5s 0s linear;
}
//操作移动端事件
var bigbox = document.querySelector(".bigbox");
var ulBox = document.querySelector(".ulBox");
var liElement = document.querySelector(".ulBox li");
var sx = 0;
var x = 0;
// 按下
bigbox.addEventListener("touchstart", function (e) {
sx=e.targetTouches[0].pageX-bigbox.offsetLeft
// 清除过渡！！！
liElement.className=''
document.addEventListener("touchmove", function (event) {
x = event.targetTouches[0].pageX - sx;
// console.log(x);
// 让li标签动
x = x >= ulBox.offsetWidth ? ulBox.offsetWidth : x;
liElement.style.width = x + "px";
});
});
// 抬起
document.addEventListener("touchend", function (e) {
if(x==ulBox.offsetWidth){
console.log('成功');
}else{
liElement.style.width =0 + "px";
liElement.className='active'
}
document.touchmove = null;
});
二.动画属性
animation-name：用于指定要绑定到选择器的关键帧名称
animation-duration：定义动画完成一个周期所需要的时间。时间以秒（s）或毫秒（ms）为单位
animation-timing-function：定义动画的速度曲线。它决定了动画在其持续周期内的进度方式。常见的值有“ease”、“linear”、“ease-in”、“ease-out”和“ease-in-out”等，也可以自定义贝塞尔曲线
animation-delay：定义动画开始前等待的时间。与
animation-duration一样，时间可以以秒（s）或毫秒（ms）为单位animation-iteration-count：定义动画应该播放的次数。可以是具体的次数，也可以是“infinite”，表示动画将无限次地播放
animation-direction：定义动画是否应该轮流反向播放。可能的值包括“normal”（正常播放）、“reverse”（反向播放）、“alternate”（动画应该轮流反向播放）和“alternate-reverse”（动画应该首先反向播放，然后轮流反向播放）
animation-fill-mode：定义动画在播放之前和之后如何应用样式。可能的值包括“none”、“forwards”、“backwards”和“both”
@keyframes ani {
0%{
width: 100px;
opacity: 1;
}
100%{
width: 500px;
opacity: .2;
}
}
@keyframes ani {
from{
width: 100px;
}
to{
width: 1000px;
}
}
/* 动画名称 */
animation-name: ani;
/* 动画持续时间 2s执行一次*/
animation-duration: 2s;
/* 是否延迟执行 */
animation-delay: 0s;
/*贝塞尔曲线 */
animation-timing-function: linear;
/* 动画是否无限次infinite 执行一次 1 */
animation-iteration-count: infinite;
/* 动画运动方向 反转*/
/* animation-direction: reverse; */
/* backwards 回到初始 forwards 两边一起动*/
animation-fill-mode:backwards;
margin: 0 auto;
/* animation-direction: alternate-reverse; */
/* 使用动画 简写*/
/* .box-3:hover{
animation: ani .5s linear 0s 1 forwards fill-mode;
} */
.box-3:hover{
/* 暂停动画 */
animation-play-state: paused;
}