css基础学习笔记（2）

目录

css过渡

css过渡：transition

css过渡的属性

css动画

css动画：animation

@keyframes 规则

css动画的属性

---

css过渡

css过渡：transition

元素属性发生变化的方式，目的是提升用户体验，增强动画效果；当过渡需要指定多个属性时，中间用逗号隔开，如果所有属性都需要过渡，可以使用all；大部分属性都支持过渡，凡是可以计算的属性都支持过渡；例如：宽度、高度、颜色、内边距、外边距等。

css过渡的属性

1.  transition-delay：指定过渡效果的延迟

2.  transition-duration：指定过渡需要执行的时间，单位为s、ms，1s=1000ms

3.  transition-property：指定需要添加过渡的属性

4.  transition-timing-function：指定过渡的方式

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果（匀速）
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

css动画

css动画：animation

方便网页实现动画效果，支持自动运行动画效果；实现动画效果，必须设定动画规则（关键帧）。

@keyframes 规则

实现动画效果，必须设定动画规则（关键帧）。from：表示动画开始时的规则，可以使用百分0%；to：表示动画结束时的规则，可以使用百分100%

@keyframes example {
  from {  }
  to {  }
}

css动画的属性

1.  animation-duration：指定动画需要执行的时间

2.  animation-delay：规定动画开始的延迟时间

3.  animation-iteration-count：设置动画应运行的次数，使用值 "infinite" 使动画永远持续循环下去

4.  animation-direction：属性指定是向前播放、向后播放还是交替播放动画

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

5.  animation-fill-mode：指定动画的填充模式

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性