transition属性
过渡特征是一个简写特征，可以用来设置四个过渡特征：CSS特征的名称(高度、宽度、不透明度等)。)的过渡——财产过渡；过渡-完成过渡需要时间；速度作用的过渡-时间-函数规则速度曲线；过渡-延迟过渡何时开始(延迟时间)？
1.过渡的动画类型主要有：线性：线性过渡。轻松：平稳过渡。轻松：循序渐进。放松：一步一步慢下来。缓和：先加速后减速。
2.主要介绍动画类型的特点：线性：规则从开始到结束以相同的速度过渡的功能。轻松：规则从慢速开始到快速再到慢速结束的过渡功能。缓和：从低速开始的规则的过渡效果。放松：规则在慢速结束时的过渡效果。从缓慢开始到结束的规则过渡。
3.总的来说：transition特性更多地用于部署伪类，例如悬停和focus，但是经常使用javascript和@madia触发器。过渡和javascript的结合更强。Js用于设置要更改的样式，过渡充当动画。一般来说，我们用css编写转换。过渡特征可以指定过渡特征、过渡时刻、过渡延迟时刻和过渡动画类型。
CSS设置
一、语法
transition : property duration time-function delay
过渡属性是一种复合属性，包括以下子属性：
Transition-property:指定用于设置过渡效果的css属性名称。
过渡持续时间：指定完成过渡效果需要多少秒或毫秒。
过渡-定时-功能：指定过渡功能，指定速度效果的速度曲线。
Transition-delay:指定开始出现的延迟时间。
默认值为：all0ease0。
注意：转场时长-时长为0，不会产生转场效果。
更改多个css属性的过渡效果时：
a { transition : background 0.8 sease-in 0.3s，color 0.6 sease-out 0.3s；}
第二，子属性
过渡性质
transition-property : none | all | property；
当值为none时，没有属性会得到过渡效果；当值为all时，所有属性都会得到过渡效果；当该值被指定为css属性时，将应用过渡效果，多个属性用逗号分隔。
过渡持续时间
过渡持续时间：时间；
该属性主要用于设置从一个属性过渡到另一个属性所需的时间，即从旧属性过渡到新属性所需的时间长度，俗称时长。
过渡定时功能
过渡-定时-功能：线性|缓和|缓和|缓和|缓和|缓和|三次贝塞尔曲线(n，n，n，n)；
这个属性指的是过渡的“缓和功能”。主要用于指定浏览器的过渡速度和过渡期间的操作进度。解释一下：
注意：三次贝塞尔曲线(n，n，n，n)的值可以在中定义自己的值，例如三次贝塞尔曲线(0.42，0，0.58，1)
div{
宽度width:100px
高度：100 px；
背景-颜色：橙色；
margin:20pxauto
边界半径：100%；
-web kit-transition-property :-web kit-border-radius；
过渡属性：边界半径；
-web kit-transition-duration :3s；
过渡-持续时间：3s；
-web kit-过渡-计时-功能：轻松；
过渡计时功能：轻松；
div:hover{
border-radius :0 px；
}
我试着用不同的价值观去看待差异，但并不明显。最好通过让它更长来估计持续时间，但它需要3秒钟，因为gif太大，无法上传。
Ease:从快到慢到慢
线性：恒速
轻松：越来越快了
Ease-out:越来越慢了。
Ease-in-out:先加速后减速。
过渡延迟
这个属性没什么好说的，就是过渡效果开始之前的延迟时间，以秒或者毫秒为单位。
再来一个栗子：
div{
宽度width:200px
高度：200 px；
背景：红色；
margin:20pxauto
-web kit-transition-property : background；
transition-property :背景；
-WebKit-transition-duration :5s；
过渡-持续时间：5秒；
-web kit-transition-time-function : ease-in；
过渡计时功能：轻松进入；
-web kit-transition-delay :18s；
过渡延迟：18秒；
}
div:hover{
背景技术： # 000;
}
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/107559.html
