老雷html/css开发视频教程之动画与变换
一、变换 transform
1.transform设置或检索对象的转换
none： 无转换
rotate()：2D旋转
scale()： 2D缩放
skew() 斜切扭曲,第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
2.transform-origin 设置或检索对象以某个原点进行转换。
该属性提供2个参数值想x，y
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
{transform-origin:0 0;}
<percentage>： 用百分比指定坐标值。可以为负值。
<length>： 用长度值指定坐标值。可以为负值。
left： 指定原点的横坐标为left
center： 指定原点的横坐标为center
right： 指定原点的横坐标为right
top： 指定原点的纵坐标为top
bottom： 指定原点的纵坐标为bottom
3.transform-style：flat | preserve-3d
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
二、过渡 transition
检索或设置对象变换时的过渡
.box2{
-webkit-transition:
background-color 3s ease-in,
border 3s ease-in 1s;
transform: rotate(10deg);
}
<' transition-property '>： 检索或设置对象中的参与过渡的属性
设置对象中的参与过渡的属性,如果提供多个属性值，以逗号进行分隔
<' transition-duration '>： 检索或设置对象过渡的持续时间
<' transition-timing-function '>： 检索或设置对象中过渡的动画类型
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start： 等同于 steps(1, start)
step-end： 等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
<' transition-delay '>： 检索或设置对象延迟过渡的时间
三、animation 动画
.ani1{
animation:opacity 2s ease-out 2s infinite normal;
}
<' animation-name '>： 检索或设置对象所应用的动画名称
@keyframes opacity{
}
<' animation-duration '>： 检索或设置对象动画的持续时间,如：1s
<' animation-timing-function '>： 检索或设置对象动画的过渡类型,同transition
<' animation-delay '>： 检索或设置对象动画延迟的时间,如：1s
<' animation-iteration-count '>： 检索或设置对象动画的循环次数
infinite：无限循环
<number>：1 指定对象动画的具体循环次数
<' animation-direction '>： 检索或设置对象动画在循环中是否反向运动
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
@keyframes opacity{
0%{transform:translate(0) rotate(30deg);opacity:0;background-color: red;}
50%{transform:translate(30px) rotate(60deg);opacity:1;}
70%{transform:translate(35px);opacity:1;}
100%{transform:translate(60px);opacity:0;}
}
.box,.box2,.box3{
width:100px;
height: 100px;
background-color: #00A0E9;
margin: 10px;
}
.box2{
-webkit-transition:
background-color 3s ease-in,
border 3s ease-in 1s;
transform: rotate(10deg) scale(.5) skew(5deg,10deg) ;
transform-origin: 10px 20px;
}
.box2:hover{
background-color: #F35757;
border:10px solid #eee;
}
.box3{
animation:opacity 2s ease-out 0s infinite;
animation-direction: alternate-reverse;
}
.cube {
position: relative;
font-size: 80px;
width: 2em;
margin: 1.5em auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-30deg) rotateY(30deg);
transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
position: absolute;
width: 2em;
height: 2em;
background: rgba(0, 0, 0, .1);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 2em;
}
.front {
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
}
.top {
-webkit-transform: rotateX(90deg) translateZ(1em);
transform: rotateX(90deg) translateZ(1em);
}
.right {
-webkit-transform: rotateY(90deg) translateZ(1em);
transform: rotateY(90deg) translateZ(1em);
}
.left {
-webkit-transform: rotateY(-90deg) translateZ(1em);
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
-webkit-transform: rotateX(-90deg) translateZ(1em);
transform: rotateX(-90deg) translateZ(1em);
}
.back {
-webkit-transform: rotateY(-180deg) translateZ(1em);
transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>