当前位置: 代码迷 >> 综合 >> 总结下过渡+动画
  详细解决方案

总结下过渡+动画

热度:14   发布时间:2023-10-11 04:16:34.0
过度
过渡(transition):
概念:就是用于设定一个元素(盒子)在两个不同状态(常规和:hover)的情况下,从一个状态变化到另一个状态的过程中以“渐变”的方式进行变换。单个属性:
transition-property:想要设置过渡的属性名;(比如:transform, width, height, backgroud, color, )
transition-duration: 过渡的时间长度;
transition-timing-function: 过渡方式(linear, ease, ease-in, ease-out, ease-in-out);
transition-delay: 延迟时间;
综合属性
transition:
第1个过渡属性的设置,
第2个过渡属性的设置,
.....
;
每个综合属性的写法: 想要设置过渡的属性名  过渡的时间长度  过渡方式  延迟时间动画
@keyframes 动画名{0%{}100%{}
}animation-name:动画名称;
animation-duration:时长;
animation-timing-function:播放方式(linear,ease,ease-in,ease-out,ease-in-out);
animation-delay:延迟时间;
animation-direction:方向(normal,reverse,alternate,alternate-reverse);
animation-iteration-count:次数(infinite无限);
animation-fill-mode:填充模式(就是停止是停在那个时间点);
animation-play-start:播放状态(runing,paused);animation综合属性:
animation:
第1个动画设置,
第2个动画设置,
.....
;
每个动画设置写法: 动画名  播放时长  动画方式  延迟时间  次数  方向 ....;

 

  相关解决方案