css3动画
整理自阮一峰的网络日志
1
2
3
4
5
6
a
心跳
c
d
e
f
g
h
A
B
.
1 /* IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。 */ 2 3 .hov div{ 4 display: inline-block; 5 color: #f33; 6 text-align: center; 7 font-size: 1.5em; 8 width: 100px; 9 height: 100px; 10 background-color: #ccc; 11 } 12 13 14 /* ========== transition ============ */ 15 .hov div:hover { 16 width: 200px; 17 height: 200px; 18 color: #3f3; 19 } 20 21 .anim2 { 22 transition: 1s; 23 /* 加上以后样式为渐变式, 而不是立刻有效 */ 24 } 25 26 .anim3 { 27 transition: 1s width; 28 /* 只对宽度应用动画, 高度则立即变化. 所以transition: 1s height, 1s width; 等价与 transition: 1s */ 29 } 30 31 .anim4 { 32 transition: 1s width, 1s 1s height; 33 /* 在宽度动画完成以后延迟1s再执行高度动画 */ 34 } 35 36 .anim5 { 37 transition: 1s cubic-bezier(.83,.97,.05,1.44); 38 39 /* 40 ease:默认, 逐渐放慢; linear:匀速; ease-in:加速; ease-out:减速; cubic-bezier函数:自定义速度模式 41 42 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) 43 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) 44 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) 45 ease-out: cubic-bezier(0, 0, 0.58, 1.0) 46 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0) 47 48 http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag 49 */ 50 } 51 52 .anim6 { 53 transition-property: height; 54 transition-duration: 1s; 55 transition-delay: 1s; 56 transition-timing-function: ease; 57 58 /* 等价于 transition: 1s 1s height ease; */ 59 } 60 61 62 63 /* ======= animation =============*/ 64 65 .auto div{ 66 display: inline-block; 67 color: #f33; 68 text-align: center; 69 font-size: 1.5em; 70 width: 100px; 71 height: 100px; 72 background-color: #ccc; 73 } 74 75 /* 可以插入更多状态, 10%,15%... */ 76 @keyframes gogogo { 77 0%{transform:scale(0.8,0.8);} 78 50%{transform:scale(1.2,1.2);} 79 100%{transform:scale(0.8,0.8);} 80 } 81 82 @-moz-keyframes gogogo { 83 0%{-moz-transform:scale(0.8,0.8);} 84 50%{-moz-transform:scale(1.2,1.2);} 85 100%{-moz-transform:scale(0.8,0.8);} 86 } 87 88 @-o-keyframes gogogo { 89 0%{-o-transform:scale(0.8,0.8);} 90 50%{-o-transform:scale(1.2,1.2);} 91 100%{-o-transform:scale(0.8,0.8);} 92 } 93 94 @-webkit-keyframes gogogo { 95 0%{-webkit-transform:scale(0.8,0.8);} 96 50%{-webkit-transform:scale(1.2,1.2);} 97 100%{-webkit-transform:scale(0.8,0.8);} 98 } 99 100 .anm1:hover { 101 -webkit-animation:gogogo 1s infinite linear; 102 -moz-animation:gogogo 1s infinite linear; 103 -ms-animation:gogogo 1s infinite linear; 104 -o-animation:gogogo 1s infinite linear; 105 animation:gogogo 1s infinite linear; 106 107 /* infinite: 无限次播放, 也可以指定具体播放次数, 如: 3 */ 108 } 109 110 111 @-webkit-keyframes pound{ 112 from { -webkit-transform: none; } 113 to { -webkit-transform: scale(0.7); } 114 } 115 116 .anm2, .anm4{ 117 border-radius:50%; 118 color:white !important; 119 background-color: #f33 !important; 120 121 -webkit-animation:pound 0.6s infinite; 122 } 123 124 125 @-webkit-keyframes radius { 126 from{} 127 to{ border-radius: 50%;} 128 } 129 .anm3 { 130 -webkit-animation:radius 1s forwards; 131 132 133 /* 动画结束以后，默认会立即从结束状态跳回到起始状态 134 forwards: 使得效果停留在结束状态上 135 none：默认值，回到动画没开始时的状态 136 backwards：让动画回到第一帧的状态 137 both: 根据animation-direction轮流应用forwards和backwards规则 138 */ 139 } 140 141 142 .anm4{ 143 -webkit-animation:pound 1s infinite alternate; 144 145 146 /* 默认动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。 147 animation-direction属性，可以改变这种行为。 148 149 normal: 1-2-3(1)-2-3(1)-2-3 150 alternate: 1-2-3-2-1-2-3 151 reverse: 3-1-1(3)-2-1(3)-2-1 152 alternate-reverse: 3-2-1-2-3-2-1 153 154 最常用的值是normal和reverse, 浏览器对其他值的支持情况不佳 155 */ 156 } 157 158 159 @-webkit-keyframes rainbow { 160 0%{background: #ccc} 161 100%{background: orange} 162 163 /*keyframes写法很自由, 164 0% 可以用 from 代替 165 100% 可以用 to 代替 166 167 from或to可以不写, 浏览器会自动推算 168 169 甚至可以把多个状态写在一行 170 from，to { transform: none; } 171 50% { transform: scale(1.2); } 172 */ 173 } 174 .anm5{ 175 -webkit-animation-name: rainbow; 176 -webkit-animation-duration: 1s; 177 -webkit-animation-timing-function: linear; 178 -webkit-animation-delay: 3s; 179 -webkit-animation-fill-mode:forwards; 180 -webkit-animation-direction: normal; 181 -webkit-animation-iteration-count: 3; 182 183 /* 等价于 -webkit-animation: 1s 3s rainbow linear 3 forwards normal; */ 184 } 185 186 187 .anm6{ 188 -webkit-animation: 1s 3s rainbow 3 steps(4) forwards; 189 190 /* 浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡 */ 191 } 192 193 194 @-webkit-keyframes bg { 195 50% {background: orange} 196 } 197 .anm7{ 198 -webkit-animation:pound 1s infinite alternate, bg 0.5s infinite alternate; 199 200 /* 多个动画叠加执行 */ 201 } 202 203 204 .anm8{ 205 -webkit-animation:gogogo 1s infinite alternate; 206 -webkit-animation-play-state: paused; 207 } 208 .anm8:hover{ 209 -webkit-animation-play-state: running; 210 211 /* 动画播放过程中动画可能会突然停止, 这时默认行为是跳回到动画的开始状态, 如a元素, 212 如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。如h元素 213 */ 214 } 215 216 217 218 /*========== transform ========== */ 219 .trans div { 220 display: inline-block; 221 width: 100px; 222 height: 30px; 223 background: #ccc; 224 color: red; 225 text-align: center; 226 } 227 228 .trs1 { 229 -webkit-transform: rotate(-30deg) skew(45deg) scale(0.8) translate(50px,-30px); 230 } 231 232 233 .trs2{ 234 -webkit-transition:all 1s ease-in-out; 235 } 236 .trs2:hover { 237 -webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0); 238 } 239 240 241 @-webkit-keyframes spin{ 242 to{-webkit-transform:rotate(360deg)} 243 } 244 .trs3 { 245 height: 100px !important; 246 font-size:3em; 247 line-height: 3%; 248 border-radius: 50%; 249 250 -webkit-animation:spin 2s infinite linear; 251 } 252 253 254 255 /*============== loading demo ================*/ 256 .loading { 257 padding-left: 50px; 258 } 259 .loading div { 260 width: 30px; 261 height: 30px; 262 background: #ccc; 263 display: inline-block; 264 border-radius: 50%; 265 } 266 267 @-webkit-keyframes loading { 268 0%, 80%, 100% { -webkit-transform: scale(0.0) } 269 40% { -webkit-transform: scale(1.0) } 270 } 271 272 .ld1 { 273 -webkit-animation:loading 1.4s -0.32s infinite linear alternate; 274 } 275 .ld2 { 276 -webkit-animation:loading 1.4s -0.16s infinite alternate; 277 } 278 .ld3 { 279 -webkit-animation:loading 1.4s infinite alternate; 280 }
