From f3a7a62b53cbd61a34f5ddb199166ceef924c1a7 Mon Sep 17 00:00:00 2001
From: Leo <leoaee@gmail.com>
Date: Tue, 29 Sep 2020 11:55:44 +0800
Subject: [PATCH] css/animation-basic.md.md created from https://stackedit.io/

---
 css/animation-basic.md.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 css/animation-basic.md.md

diff --git a/css/animation-basic.md.md b/css/animation-basic.md.md
new file mode 100644
index 0000000..613dc3b
--- /dev/null
+++ b/css/animation-basic.md.md
@@ -0,0 +1,33 @@
+# animation 基本使用
+
+## 基本属性
+
+```css
+@keyframes fade-in { /* 关键帧名字 */
+	from { /* 等效于 0% */
+		background-color: red;
+	}
+	50% {
+		background-color: orange;
+	}
+	to { /* 等效于 */
+		background-color: yellow;
+	}
+}
+
+.animation-class {
+	/*<single-animation> = <time>  ||  <timing-function>  ||  <time>  ||  <single-animation-iteration-count>  ||  <single-animation-direction>  ||  <single-animation-fill-mode>  ||  <single-animation-play-state>  ||  [ none |  <keyframes-name>  ]*/
+	animation: 3s ease-out 500ms infinite alternate both running fade-in;
+}
+/* 和上边等效 */
+.animation-class-2 {
+	animation-name: fade-in; /* 关键帧名字 */
+	animation-duration:  3s; /* 动画时长 */
+	animation-timing-function: ease-out; /* 动画的时间函数 */
+	animation-delay:  500ms; /* 动画延迟执行时间 */
+	animation-direction: alternate; /* 动画方向 normal: 0% => 100% */
+	animation-iteration-count: infinite; /* 动画执行次数 */
+	animation-fill-mode: both; /* 执行前后的样式 */
+	animation-play-state: running; /* 控制运行和暂停 */
+}
+```