CSS基础笔记-02动画

CSS基础笔记系列

《CSS基础笔记-01CSS概述》

什么是动画

动画是一种综合艺术，它集合了绘画、电影、数字媒体、摄影、音乐、文学等多种艺术门类于一身。具体来说，动画是通过在连续多格的胶片上拍摄一系列单个画面，然后连续播放，产生动态视觉的艺术和技术。

动画的英文有很多表述，如animation、cartoon、animated cartoon、cameracature等。其中较正式的“Animation”一词源自于拉丁文字根anima，意思为“灵魂”，动词animate是“赋予生命”的意思，引申为使某物活起来的意思。

因此，动画可以理解为使用绘画的手法，创造生命运动的艺术。动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。

在CSS中，动画可以通过@keyframes规则来定义。可以使用@keyframes规则来创建动画，并在特定时间点定义动画的帧。这些帧描述了元素从一种样式逐渐变化为另一种样式的效果。

CSS动画的工作原理

CSS动画的工作原理：

定义动画；如，动画的名称、持续时间、播放次数等属性。可以使用animation属性进行设置。
创建关键帧；通过@keyframes规则，可以定义一系列关键帧，描述元素在不同时间点的样式。
应用动画；将定义好的动画应用到元素上。通过将动画名称作为属性值，将其应用到元素的animation属性中。
浏览器渲染：浏览器接收到CSS样式后，会根据定义的动画和关键帧计算出动画过程中的每一帧，并将这些帧连续播放，形成动画效果。

动画属性(animation)

To create a CSS animation sequence, you style the element you want to animate with the animationproperty or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in the Defining animation sequence using keyframes.

animation常用的子属性如下：

animation-name：指定关键帧规则的name。
animation-delay：设置动画延迟时间。
animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
animation-iteration-count：设置动画重复执行次数。
animation-direction：设置动画是否往返，normal为不执行往返，alternate为执行往返。
animation-play-state：控制动画是否执行或暂停。

p {animation-duration: 3s;animation-name: rightToLeft;
}

关键帧规则

关键帧定义了动画过程中元素状态的实际变化效果。通过 @keyframes rule在动画序列中定义关键帧的样式来控制CSS 动画序列中的中间状态，从而呈现出视觉上的动画效果。

语法

@keyframes <keyframes-name> { <qualified-rule-list> 
}<qualified-rule-list>:<percentage>{property: value}

例如，

@keyframes slidein {from {margin-left: 100%;width: 300%;}to {margin-left: 0%;width: 100%;}
}

要使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧由一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。可以按任意顺序列出关键帧百分比，它们将按照其应该发生的顺序来处理。

关键帧可以使用百分比或关键词“from”和“to”来表示时间点。“from”等价于0%表示起始帧，“to”等价于“100%”表示结束帧。

实现动画

一旦完成动画的时间设置，接下来就需要定义动画的具体表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

示例1

实现一个文字颜色动态变化的效果。(基于《CSS基础笔记-01CSS概述》的代码)

/* 元素选择器，即直接匹配 HTML 元素的选择器。 */
h1 {color: red;
}/* 用逗号将不同选择器隔开，即可一次使用多个选择器 */
p,li {color: green;
}/* 去除list bullets */
li {/* list-style-type: none; *//* list-style-type: space-counter; *//* list-style-type: kannada;r */list-style-type: "\1F44D";
}p {  animation-name: colorChange;  animation-duration: 4s;animation-iteration-count:infinite;
}@keyframes colorChange {  0% {color: red;}50% {color: green;}100% {color: blue;}
}

<!doctype html>
<html lang="en"><head><meta charset="utf-8" /><title>Tao Te Ching</title><link rel="stylesheet" href="styles.css" /></head><body><h1>第一章（论道）</h1><p style="white-space: pre-line;">道可道，非常道；名可名，非常名。 无，名天地之始；有，名万物之母; 故常无，欲以观其妙；常有，欲以观其徼。 此两者，同出而异名，同谓之玄。玄之又玄，众妙之门。</p><ul><li>第二章</li><li>第三章</li><li>第四章</li><li>第五章</li></ul></body>
</html>

动画效果

css_flicker

示例2

实现一个滑入的效果。

p {  animation-name: colorChange;  animation-duration: 4s;animation-iteration-count:infinite;
}@keyframes colorChange {  0% {color: red;}50% {color: green;}100% {color: blue;}
}