|
|
@@ -0,0 +1,76 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #box {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #00f;
|
|
|
+ margin: 100px auto;
|
|
|
+ animation: run 3s linear 2s infinite normal forwards running;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes run {
|
|
|
+ from {
|
|
|
+ /* width: 200px; */
|
|
|
+ transform: rotateZ(0deg);
|
|
|
+ }
|
|
|
+ 20% {
|
|
|
+ /* width: 220px; */
|
|
|
+ transform: rotateZ(20deg);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ /* width: 240px; */
|
|
|
+ transform: rotateZ(40deg);
|
|
|
+ }
|
|
|
+ 60% {
|
|
|
+ /* width: 260px; */
|
|
|
+ transform: rotateZ(60deg);
|
|
|
+ }
|
|
|
+ 80% {
|
|
|
+ /* width: 280px; */
|
|
|
+ transform: rotateZ(80deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ /* width: 300px; */
|
|
|
+ transform: rotateZ(100deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ animation 动画
|
|
|
+ 自执行 ：用于实现关键帧动画式的风格
|
|
|
+ -webkit-animation：name duration timing-function delay iteration-count direction fill-mode play-state
|
|
|
+ 1.animation-name 用来定义一个动画的名称，transition-name相同
|
|
|
+ 2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
|
|
|
+ 3.animation-timing-function：动画的播放方法，transition-easing相同
|
|
|
+ 4.animation-delay:动画的延迟时间；
|
|
|
+ 5.animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
|
|
|
+ 6.animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
|
|
|
+ 7.animation-fill-mode: 用于设置动画结束后的停留点（forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上 默认值:none both:介于最后和开始之间/动画结束或开始的状态）
|
|
|
+ 8.animation-play-state: paused(动画已暂停)|running(动画正在播放);
|
|
|
+ ""关键帧动画必须由@keyframes来引出""
|
|
|
+ @keyframes 动画名称(name){
|
|
|
+ 执行代码块（0%==from 100%==to）[关键帧动画的单位必须是百分比]
|
|
|
+ }
|
|
|
+ 关键帧动画可以设置不同时段的百分比效果
|
|
|
+
|
|
|
+ transition与animation区别
|
|
|
+
|
|
|
+ transition: 过渡平滑的动画 最多4个参数 最少1个（all）
|
|
|
+ animation: 关键帧 最长8个参数 最少2个
|
|
|
+
|
|
|
+
|
|
|
+ -->
|
|
|
+ <div id="box"></div>
|
|
|
+</body>
|
|
|
+</html>
|
e