css基础--过渡、动画
作者：互联网
目录
过渡
css过渡可以在给定的时间内平滑地改变属性值
过渡属性
transition-property属性
作用：设置对象中参与过渡的属性
transition-property: all(默认)|none|<property>;
transition-property: all;(默认)
transition-property: none;
transition-property:color,background-color,border-color;all(默认)：css属性均可以进行过渡
none：不指定过渡效果
<property>：指定需要进行过渡的css属性，列表以逗号进行分隔；
transition-duration属性
作用：设置过渡持续时间，默认0（以s或ms计）
transition-duration:time;(s/ms)transition-timing-function属性
作用：设置过渡动画类型
transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);ease(默认)：平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))
linear：线性过渡。(=cubic-bezier(0,0,1,1))
ease-in：由慢到快。(=cubic-bezier(0.42,0,1,1))
ease-out：由快到慢。(=cubic-bezier(0,0,0.58,1))
ease-in-out：慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))
cubic-bezier(n,n,n,n)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间
transition-timing-delay属性
作用：过渡延迟时间，默认0（以s或ms计）
transition-delay:time;transition属性
作用：简写，综合设置多个属性
transition:property duration timing-function delay;transition与transform异同
transition是过渡属性，transform是2d/3d转换属性
相同点：
1.两者一般都会设置触发条件，例如设置伪类:hover等
2.均不会对其他元素布局产生影响
不同点：
1.transition过渡效果可以设置过渡时间、延迟、曲线等；transform变形是瞬间完成的变化，不能设置这些效果
2.transition过渡默认是对象左上角，不能改变；transform变形能设置对象中心点
3.transition过渡是针对元素属性进行改变；transform变形是针对整个元素进行改变
动画
@keyframes规则
作用：创建动画，指定一个css样式和动画逐步从目前样式更改为新样式
注：要使动画生效，必须将动画绑定到某个元素。并且必须定义动画名称和持续时间，若省略持续时间，由于默认值为0，动画将无法运行。
动画变化时间设置：百分比、from、to[使用关键词"from"或"to"，等同于0%(动画开始)和100%(动画完成)]
示例：
<style>
/* 改变div背景色并且移动 */
@keyframes name{
0% {transform:translate(0px); background-color: blueviolet;}
25% {transform:translate(15px); background-color:brown;}
50% {transform:translate(30px); background-color:burlywood;}
75% {transform:translate(45px); background-color:cadetblue;}
100%{transform:translate(60px); background-color:chartreuse;}
}
.name{
width: 150px;
transform: translate(30px);
animation: name 2s linear;
}
</style>
<body>
<div class="name">content</div>
</body>动画属性
animation-name：设置对象应用动画名称，与@keyframes配合使用
animation-name:none(默认)|keyframename;animation-duration：设置对象持续时间，默认值为0（以s或ms计）
animation-duration:time;animation-timing-function：设置对象动画过渡类型
animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out
|steps(int,start|end)|cubic-bezier(n,n,n,n);ease(默认)：平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))
linear：线性过渡。(=cubic-bezier(0,0,1,1))
ease-in：由慢到快。(=cubic-bezier(0.42,0,1,1))
ease-out：由快到慢。(=cubic-bezier(0,0,0.58,1))
ease-in-out：慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))
cubic-bezier(n,n,n,n)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间
animation-delay：设置对象动画延迟时间，默认值为0（以s或ms计）
注：允许负值，-3s使动画马上开始，但跳过3s进入动画
animation-delay:time;animation-iteration-count：设置对象循环次数，默认1
animation-iteration-count:n|infinite;n:数字，设置循环动画次数，默认1
infinite: 设置动画无限循环
animation-direction：设置对象在循环中运动方向
animation-direction:normal|reverse|alternate|alternate-reverse;normal(默认)：动画正常正向播放
reverse：动画反向播放
alternate：动画奇数次正向播放，偶数次反向播放
alternate-reverse：动画奇数次反向播放，偶数次正向播放
animation-fill-mode：设置动画不播放时，要应用到元素的样式
animation-fill-mode:none|forwards|backwards|both;none(默认)：不设置动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始时的状态
animation-play-state：设置动画状态
animation-play-state:paused|running;running(默认)：动画运行
paused：动画暂停
animation：复合属性，综合设置多个属性，默认值：none 0 ease 0 1 normal
animation:name duration timing-function delay iteration-count direction fill-mode play-style；标签：动画,bezier,cubic,--,ease,transition,animation,css 来源： https://blog.csdn.net/zxn200125/article/details/120871341