CSS3-Animation 动画-我就是菜

00.什么是Animation?

Animation是CSS3中最引人注目的特性之一，它通过允许设置多个关键帧节点，实现了对单个或多个动画的精确控制。这种能力使得开发者能够设计出既复杂又流畅的动画效果，为网页带来前所未有的动态体验。

动画效果的本质在于，它允许网页元素从一个样式平滑过渡到另一个样式。这种变化可以涉及任意数量的样式属性，并且可以重复任意次数。这意味着，无论是简单的颜色变化，还是复杂的路径移动，CSS3动画都能提供强大的支持。

01.Animation属性

属性	默认值	描述
@keyframes		规定动画。
animation		所有动画属性的简写属性。
animation-name	none	规定 @keyframes 动画的名称。
animation-duration	0s	规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function	ease	规定动画的速度曲线。
animation-fill-mode	none	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	0s	规定动画何时开始。
animation-iteration-count	1	规定动画被播放的次数。
animation-direction	normal	规定动画是否在下一周期逆向地播放。
animation-play-state	running	规定动画是否正在运行或暂停。

02.语法

/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* two animations */
animation:
  3s linear slidein,
  3s ease-out 5s slideo

03.基础使用

<div class="sun"></div>

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

:root伪类：

overflow: hidden; 属性用于隐藏超出根元素（通常是<html>标签）边界的内容。在这个例子中，它用于隐藏太阳在地平线以下的部分。
background-color: lightblue; 设置了整个页面的背景颜色为浅蓝色，这可以代表天空的颜色。
display: flex; 将根元素的显示类型设置为弹性盒子（flexbox），这使得子元素可以更容易地在页面上居中对齐。
justify-content: center; 属性确保弹性盒子中的子元素（在这个例子中是太阳）在主轴（默认是水平方向）上居中。

.sun类：

background-color: yellow; 设置太阳元素的背景颜色为黄色。
border-radius: 50%; 将太阳元素的边框设置为圆形，这样看起来更像一个太阳。
height: 100vh; 设置太阳元素的高度为视口（viewport）高度的100%，vh是视口高度单位，1vh等于视口高度的1%。
aspect-ratio: 1 / 1; 保持太阳元素的宽高比为1:1，确保它是一个完美的圆形。
animation: 4s linear 0s infinite alternate sun-rise; 应用了一个名为sun-rise的动画，这个动画持续4秒，运动速度是线性的，没有延迟，无限次重复，并且在每次迭代中交替（即向前和向后运动）。

@keyframes sun-rise：

这是定义动画帧的地方，sun-rise是动画的名称，它与animation属性中的名称相匹配。
from关键字定义了动画的起始状态，这里使用transform: translateY(110vh);将太阳元素向下移动110%的视口高度，这样太阳就会在视口下方开始。
to关键字定义了动画的结束状态，这里使用transform: translateY(0);将太阳元素移动回其原始位置，即视口的顶部。

目录CONTENT

CSS3-Animation 动画

00.什么是Animation?

01.Animation属性

02.语法

03.基础使用

评论区