CSS3之动画属性

Posted 2023-03-29 许小墨~

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

文章目录

• 系列文章目录
• • CSS3 中的动画
  • • 第一步：定义一个动画
    • 第二步：执行这个动画
    • 第三步：暂停或启动这个动画
  • 过渡和动画的区别

---

CSS3 中的动画

CSS3 动画是使元素从一种样式逐渐变化为另一种样式的效果

要创建 CSS3 动画，需要了解 @keyframes 规则
@keyframes 规则是创建动画
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果
指定至少这两个CSS3的动画属性绑定向一个选择器
规定动画的名称
规定动画的时长

第一步：定义一个动画

@keyframes 动画名称 

	/*定义关键帧 必须有头有尾*/
	from 或者 0%
		css-styles:
	

	50%
		css-styles:
	

	to 或者 100%
		css-styles:
	
	

第二步：执行这个动画

animation: 动画名称  执行时间  速度效果  延迟时间  执行次数  往复执行;

1. animation-name 动画名称
2. animation-duration 执行时间
3. animation-timing-function 速度效果
4. animation-delay 延迟时间
5. animation-iteration-count 执行次数
   • infinite 播放无限次（永远）
6. animation-direction 往复执行
   • reverse 动画反向播放
   • alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
   • alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

第三步：暂停或启动这个动画

animation-play-state:paused[暂停] | running[启动];

过渡和动画的区别

• 相同点：
  都是随着时间改变元素的属性值

• 不同点：

  1. transition 需要触发一个事件(hover 事件或 click 事件等)才会随时间改变其 css 属性；

  2. 而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3 的 animation 就需要明确的动画属性值

八.CSS之animation(动画)

参考技术A

过渡（transition）

​ 多个属性间使用,隔开
​ 如果所有属性都需要过渡，则使用all关键字
​ 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）

时间单位：s 和 ms 1s = 1000ms

指定过渡的执行的方式
可选值：

transition-delay: 2s;

可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。

关键帧语法：

animation-name: 要对当前元素生效的关键帧的名字

animation-name: test;

animation-duration: 4s;

animation-delay: 2s;

可选值：

可选值：

可选值：

可选值：

animation: test 2s 2 1s alternate; 和transition 的简写类似 ，执行时间和延时时间顺序注意

变形就是指通过CSS来改变元素的形状或位置.

变形不会影响到页面的布局

transform 用来设置元素的变形效果

transform: translateY(-100px);

平移：平移元素，百分比是相对于自身计算的(px,100%)

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
, 必须要设置网页的视距

/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px;

通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显

rotateX()

rotateY()
rotateZ()

单位 角度 deg、 n turn（圈）

**是否显示元素的背面 **
backface-visibility: hidden;