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>
浙公网安备 33010602011771号