CSS 动画
一、使用 animation 和 @keyframes
二、使用 transition 属性
/** * css3 动画 ?* 使用 @keyframes规则与 animation ?* @keyframes规则用于创建动画，在 @keyframes中规定某项 css样式，就能创建由当前样式逐渐改为新样式的动画 * 若在某个时间点有多个动画指定同一属性行为，则在最后出现并应用的动画将覆盖其他动画。 * Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 */// 属性 ??????????????????????????描述// @keyframes ???????????????????用于规定动画。 ???// 如: @keyframes myAnimationName { code... }// animation ???????????????????所有动画属性的简写属性，除了 animation-play-state 属性。 ???// 如: animation: name duration timing-function delay iteration-count direction;// animation-name ???????????????规定 @keyframes 动画的名称。 ???// 如: animation-name: myAnimationName// animation-duration ???????????规定动画完成一个周期所花费的秒或毫秒。默认是 0。 ???// 如: animation-duration: 2s/2000ms// animation-timing-function ???规定动画的速度曲线。默认是 "ease"。 ???// 如: animation-timing-function: cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1) cubic-bezier 函数详情: https://www.w3.org/TR/css-easing-1/#typedef-timing-function// animation-delay ?????????????规定动画何时开始。默认是 0。 ???// 如: animation-delay: 2s/2000ms/-2s/-2000ms 使用负值动画会马上开始，但会跳过对应的 s/ms 数// animation-iteration-count ???规定动画被播放的次数。默认是 1。 ???// 如: animation-iteration-count: n/infinite(无数次播放)// animation-direction ?????????规定动画是否在下一周期逆向地播放。默认是 "normal"。 ???// 如: animation-direction: alternate(动画在奇数次数正常播放,如 1、3、5...，在偶数次数反向播放，如 2、4、6...)// animation-play-state ?????????规定动画是否正在运行或暂停。默认是 "running"。 ???// 如: animation-play-state: paused(如利用该属性通过 js代码在动画播放过程中暂停动画)// animation-fill-mode ?????????规定对象动画时间之外的状态。默认 none// 如: animation-fill-mode: forwards(动画完成是,保持最后一个属性,即停在最后一个关键帧)/backwards(定义在 animation-delay时间内要用到的属性,即第一个关键帧)/both(应用 forwards和 backwards)代码示例：
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>css animation</title> ?<style> ???html,body{ ?????width: 100%; ?????height: 100%; ???} ???.block{ ?????position: relative; ?????width: 80px; ?????height: 50px; ???????????background-color: forestgreen; ?????border-radius: 10%; ?????animation-name: myAnimation; ?????animation-duration: 3s; ?????animation-timing-function: ease-in-out; ?????animation-iteration-count: infinite; ?????text-align: center; ?????font-size: 20px; ?????color: white; ???} ???@keyframes myAnimation{ ?????0%{ ???????left: 0; ?????} ?????25%{ ???????left: 15%; ???????transform: rotate(20deg); ?????} ?????50%{ ???????transform: rotate(0deg); ???????left: 30%; ?????} ?????90%{ ???????transform: rotate(360deg); ???????left: 6%; ?????} ?????95%{ ???????transform: scale(1.5); ???????left: 3%; ?????} ?????100%{ ???????????????transform: scale(1); ???????left: 0px; ?????} ???} ?</style></head><body> ?<div class="block">hello world</div></body></html>示例结果：
/** * 使用 transition 属性 */ // 值 ???????????????????????????描述// transition-property ?????????规定设置过渡效果的 CSS 属性的名称。默认 all(所有属性获得过渡效果)// 如: transition-property: width,property2,...propertyN|none(没有属性会获得过渡效果)// transition-duration ?????????规定完成过渡效果需要多少秒或毫秒。默认 0s(意味着不会有任何效果)// 如: transition-duration: 2s/2000ms// transition-timing-function ???规定速度效果的速度曲线。默认 ease// 如: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1)// transition-delay ?????????????定义过渡效果何时开始。默认 0s// 如: transition-delay: 2s/2000ms
代码示例：
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>css transition</title> ?<style> ???html, ???body { ?????width: 100%; ?????height: 100%; ???} ???.test { ?????width: 100px; ?????height: 100px; ?????border: 1px solid black; ?????transition-property: width, background-color; ?????transition-duration: 2s; ?????transition-timing-function: ease-in-out; ???} ???.test:hover { ?????width: 300px; ?????background-color: red; ???} ?</style></head><body> ?<div class="test"></div></body></html>示例结果：
CSS 动画总结
原文地址：https://www.cnblogs.com/go4it/p/10122771.html