文章目录
CSS3 变形 过渡 动画transform(变形)概述translate() 平移scale() 缩放skew() 倾斜rotate() 旋转transform-origin 中心原点 transition(过渡)概述说明使用transition-property取值为all animation(动画)概述说明使用animation-play-state 播放状态animation-fill-mode 动画不播放时状态 动画案例CSS3 变形 过渡 动画
在CSS3中，动画效果包括3个部分：变形（transform）、过渡（transition）、动画（animation）。
transform(变形)
概述
可以使用transform属性来实现元素的各种变形效果，如平移、缩放、旋转、倾斜等。
位移变形和相对定位非常像，也会在“老家留坑”，“行影分离”。
translate() 平移
语法
transform: translateX(x); /*沿x轴方向平移*/transform: translateY(y); /*沿y轴方向平移*/transform: translate(x, y); /*沿x轴和y轴同时平移*/
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {width: 150px;height: 100px;}.box {border: 1px dashed silver;}.current {background-color: rgb(30, 170, 250);opacity: 0.5;transform: translate(20px, 20px);}</style></head><body><div class="box"><div class="current"></div></div></body></html>
scale() 缩放
语法
transform: scaleX(x); /*沿x轴方向缩放*/transform: scaleY(y); /*沿y轴方向缩放*/transform: scale(x, y); /*沿x轴和y轴同时缩放*/
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {width: 150px;height: 100px;}.box {border: 1px dashed silver;margin: 50px auto;}.current {background-color: rgb(30, 170, 250);opacity: 0.5;transform: scale(1.2, 1.5);}</style></head><body><div class="box"><div class="current"></div></div></body></html>
skew() 倾斜
语法
transform: skewX(x);/*沿x轴方向倾斜*/transform: skewY(y);/*沿y轴方向倾斜*/transform: skew(x, y);/*沿x轴和y轴同时倾斜*/
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {width: 150px;height: 100px;}.box {border: 1px dashed silver;margin: 50px auto;}.current {background-color: rgb(30, 170, 250);opacity: 0.5;transform: skewY(30deg);}</style></head><body><div class="box"><div class="current"></div></div></body></html>
rotate() 旋转
语法
transform: rotate(angle);
说明
angle参数：表示元素相对于中心原点旋转的度数，单位为deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {width: 150px;height: 100px;}.box {border: 1px dashed silver;margin: 50px auto;}.current {background-color: rgb(30, 170, 250);opacity: 0.5;transform: rotate(30deg);}</style></head><body><div class="box"><div class="current"></div></div></body></html>
transform-origin 中心原点
语法
transform-origin: 取值;
说明
transform-origin属性取值有两种：一种是“长度值”，另一种是“关键字”。
当取值为长度值时，单位可以为px、em和百分比等。
当取值为关键字时，transform-origin属性取值跟background-position属性取值是相似的.
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {width: 150px;height: 100px;}.box {border: 1px dashed silver;margin: 50px auto;}.current {background-color: rgb(30, 170, 250);opacity: 0.5;transform-origin: right center;transform: rotate(-90deg);}</style></head><body><div class="box"><div class="current"></div></div></body></html>
transition(过渡)
概述
在CSS3中，我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
CSS变形（transform）呈现的仅仅是一个“结果”，而CSS过渡（transition）呈现的是一个“过程”。这个所谓的“过程”，通俗来说就是一种动画变化过程，如渐渐显示、渐渐隐藏、动画快慢等
说明
语法
transition: 过渡属性 过渡时间 过渡方式 延迟时间;
transition子属性
transition-timing-function属性
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {display: inline-block;padding: 5px 10px;border-radius: 5px;color: white;background-color: hotpink;cursor: pointer;transition: background-color 1s linear 0s;}div:hover {background-color: purple;}</style></head><body><div>hello</div></body></html>
transition-property取值为all
可以使用transition属性同时对多个CSS属性来实现过渡效果。
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">div {display: inline-block;width: 100px;height: 100px;border-radius: 0%;background-color: lightskyblue;transition: all 1s linear 0s;}div:hover {border-radius: 50%;background-color: purple;}</style></head><body><div></div></body></html>
animation(动画)
概述
在CSS3中，我们可以使用animation属性来实现元素的动画效果。
transition属性（即CSS3过渡）只能实现一次性的动画效果，而animation属性（即CSS3动画）可以实现连续性的动画效果。
说明
语法
animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;
说明
animation是一个复合属性，主要包括6个子属性。
animation的子属性
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">@keyframes mycolor {0% {background-color: red;}30% {background-color: blue;}60% {background-color: yellow;}100% {background-color: green;}}div {width: 100px;height: 100px;border-radius: 50px;background-color: red;}div:hover {animation: mycolor 5s linear;}</style></head><body><div></div></body></html>
animation-play-state 播放状态
语法
animation-play-state: 取值;
animation-play-state属性取值
使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">@keyframes mytranslate {0% {}50% {transform: translateX(160px);}100% {}}#container {display: inline-block;width: 200px;border: 1px solid silver;}#ball {width: 40px;height: 40px;border-radius: 50%;background-color: red;animation: mytranslate 2s linear infinite;}</style><script>window.onload = function() {var ball = document.getElementById("ball");var btn_pause = document.getElementById("btn_pause");var btn_play = document.getElementById("btn_play");btn_pause.onclick = function() {ball.style.animationPlayState = "paused";}btn_play.onclick = function() {ball.style.animationPlayState = "running";}}</script></head><body><div id="container"><div id="ball"></div></div><div><button id="btn_pause">暂停</button><button id="btn_play">播放</button></div></body></html>
animation-fill-mode 动画不播放时状态
<!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>@keyframes test {0% {left: 0px;background: red;}100% {left: 300px;background: blue;}}div {width: 100px;height: 100px;background: yellow;position: relative;margin: 10px 0px;}.box1 {animation: test 4s linear 2s 1;animation-fill-mode: none;}.box2 {animation: test 4s linear 2s 1;animation-fill-mode: forwards;}.box3 {animation: test 4s linear 2s 1;animation-fill-mode: backwards;}.box4 {animation: test 4s linear 2s 1;animation-fill-mode: both;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>
动画案例
如果觉得《CSS3 变形 过渡 动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
