css3之animation、transform、transition
animation动画
动画使元素逐渐从一种样式变为另一种样式。使用 CSS 动画之前，需要首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。使用@keyframes 规则定义动画关键帧，动画将在特定时间逐渐从当前样式更改为新样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @keyframes example { 0% { background-color: red; left: 0px; top: 0px; } 25% { background-color: yellow; left: 100px; top: 0px; } 50% { background-color: blue; left: 100px; top: 100px; } 75% { background-color: green; left: 0px; top: 100px; } 100% { background-color: red; left: 0px; top: 0px; } } div { width: 100px; height: 100px; position: relative; background-color: red; /* 使用动画 */ animation-name: example; /* animation-duration 属性定义需要多长时间才能完成动画。 */ animation-duration: 4s; /* animation-delay 属性规定动画开始的延迟时间 */ animation-delay: 2s; /* animation-iteration-count 属性指定动画应运行的次数。infinite或者数字 */ animation-iteration-count: infinite; /* animation-direction 属性指定是向前播放、向后播放还是交替播放动画。 可选值： normal - 动画正常播放（向前）。默认值； reverse - 动画以反方向播放（向后）； alternate - 动画先向前播放，然后向后； alternate-reverse - 动画先向后播放，然后向前 */ animation-direction: alternate; /* animation-timing-function 属性规定动画的速度曲线。 可选值： ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）； linear - 规定从开始到结束的速度相同的动画； ease-in - 规定慢速开始的动画； ease-out - 规定慢速结束的动画； ease-in-out - 指定开始和结束较慢的动画； cubic-bezier(n,n,n,n) - 运行在三次贝塞尔函数中定义自己的值 */ animation-timing-function: ease; /* animation-fill-mode 属性指定动画的填充模式,在不播放动画时（在开始之前，结束之后，或两者都结束时）
animation-fill-mode 属性规定目标元素的样式 可选值： none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/ animation-fill-mode: backwards; /* 动画简写属性animation: name duration timing-function delay iteration-count direction; */ } </style> </head> <body> <div></div> </body> </html>
transition过渡
CSS 过渡允许在给定的时间内平滑地改变属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; height: 100px; position: relative; background-color: red; } .div1 { /* transition-property 规定过渡效果所针对的 CSS 属性的名称。 */ transition-property: width; /* transition-duration 规定过渡效果要持续多少秒或毫秒。 */ transition-duration: 2s; /* transition-timing-function 规定过渡效果的速度曲线。 可选值： ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认） linear - 规定从开始到结束具有相同速度的过渡效果 ease-in -规定缓慢开始的过渡效果 ease-out - 规定缓慢结束的过渡效果 ease-in-out - 规定开始和结束较慢的过渡效果 cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值*/ transition-timing-function: linear; /* transition-delay 规定过渡效果的延迟（以秒计）。 */ transition-delay: 1s; } .div2 { /* 简写属性transition: property duration timing-function delay; */ transition: width 2s linear 1s; } div:hover { width: 300px; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
transform 2D 转换
transform 移动、旋转、缩放和倾斜元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { display: flex; border: 1px solid red; font-size: 8px; } .box { width: 75px; height: 75px; border: 1px solid orange; margin: 10px; } .translate { /* translate(dx,dy) 平移，从其当前位置移动元素 */ transform: translate(10px, 10px); } .translateX { /* translateX(dx) 平移，从当前位置沿X轴方向移动元素 */ transform: translateX(10px); } .translateY { /* translateY(dy) 平移，从当前位置沿Y轴方向移动元素 */ transform: translateY(10px); } .rotate { /* rotate(deg) 旋转，根据给定的角度顺时针或逆时针旋转元素。 */ transform: rotate(20deg); } .rotate1 { transform: rotate(20deg); /* transform-origin 属性允许改变被转换元素的位置。transform-origin: x-axis y-axis x-axis定义视图被置于 X 轴的何处。可能的值：left、center、right、length、% y-axis定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、% */ transform-origin: left bottom; } .scale { /* scale(px,py) 缩放，根据给定的宽度和高度参数缩放元素 */ transform: scale(0.75, 0.5); } .scaleX { /* scaleX(px) X轴方向上缩放，根据给定的宽度参数缩放元素 */ transform: scaleX(1.5); } .scaleY { /* scaleY(py) Y轴方向上缩放，根据给定的高度参数缩放元素 */ transform: scaleY(1.25); } .skew { /* skew(degX,degY) 沿X轴和Y轴方向上斜给定角度 */ transform: skew(45deg, -30deg); } .skewX { /* skewX(deg) X轴方向上斜给定角度 */ transform: skewX(30deg); } .skewY { /* skewY(deg) Y轴方向上斜给定角度 */ transform: skewY(-30deg); } .matrix { /* 相当于translate(10px, 10px) */ transform: matrix(1, 0, 0, 1, 10, 10); } .matrix1 { /* 相当于scale(0.75, 0.5) */ transform: matrix(0.75, 0, 0, 0.5, 0, 0); } </style> </head> <body> <fieldset> <legend>translate平移</legend> <div class="container"> <div class="box"></div> <div class="box translate">translate(10px, 10px)</div> <div class="box translateX">translateX(10px)</div> <div class="box translateY">translateY(10px)</div> </div> </fieldset> <fieldset> <legend>rotate旋转</legend> <div class="container"> <div class="box"></div> <div class="box rotate">rotate(20deg)</div> <div class="box rotate1">rotate(20deg)</div> </div> </fieldset> <fieldset> <legend>scale缩放</legend> <div class="container"> <div class="box"></div> <div class="box scale">scale(0.75, 0.5)</div> <div class="box scaleX">scaleX(1.5)</div> <div class="box scaleY">scaleY(1.25)</div> </div> </fieldset> <fieldset> <legend>skew倾斜</legend> <div class="container"> <div class="box"></div> <div class="box skew">skew(45deg, -30deg)</div> <div class="box skewX">skewX(30deg)</div> <div class="box skewY">skewY(-30deg)</div> </div> </fieldset> <fieldset> <legend>martrix</legend> <div class="container"> <div class="box"></div> <div class="box matrix">matrix</div> <div class="box translate">translate</div> <div class="box matrix1">matrix</div> <div class="box scale">scale</div> </div> </fieldset> </body> </html>
