CSS3 动画——Animations（css3动画keyframe）
CSS3 Animations
1 @keyframes属性
@keyframes 动画名称{关键帧持续时间% {css样式;}}
@keyframes myanimation
{
0% {top:0px;background-color:#0000cc;}
50% {top:100px;background-color;#339900;}
100% {top:0px;background-color:#330000;}
}2 animation属性
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间, 以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始, 然后加快, 在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 参考地址: http://cubic-bezier.com/#.17,.67,.83,.67
animation-delay 规定在动画开始之前的延迟。以秒或毫秒计, 默认值是 0。
animation-iteration-count 规定动画应该播放的次数。
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。
animation-direction 规定是否应该轮流反向播放动画。
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
使用方法一: from...to...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
}
/*div:hover{
width: 800px;
}*/
/*@keyframes 动画名{
from{
动画第一步(这里你可以不写他会继承上面的)
}
to{
动画最后一步
}
}*/
/*动画声明*/
@keyframes widthChange{
/*from{
width: 100px;
}*/
to{
width: 800px;
}
}
div{
/*animation: 动画名称 过渡总时长;*/
animation: widthChange 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用方法二: 百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
/*动画声明*/
@keyframes positionChange{
/*from{
left: 0;
}
to{
left: 800px;
}*/
/*百分数评分的的过渡总时长*/
0%{
left: 0;
top: 0;
}
50%{
left: 800px;
top: 0;
}
100%{
left: 800px;
top: 500px;
}
}
div{
/*animation: 动画名称 过渡总时长;*/
animation: positionChange 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用方法三: animation参数格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
}
@keyframes widthChange{
to{
width: 800px;
}
}
div{
/*
* 动画名称
* 动画总时长s ms
* 动画形式ease ease-in ease-out ease-in-out linear 贝塞尔曲线、
* 延迟时间s ms
* 循环次数①阿拉伯数字②infinite(无限次)
* 停留到最后一帧forwards
* 反向播放动画alternate(来回当做2次处理) normal 正常
*
* */
animation: widthChange 5s;
}
div:hover{
/*动画停止*/
animation-play-state: paused
}
</style>
</head>
<body>
<div></div>
</body>
</html>建立3D场景
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
transform-style: flat|preserve-3d;
perspective 属性定义 3D 元素距视图的距离, 以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时, 其子元素会获得透视效果, 而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
perspective: number|none;
景深:
perspective是设置3d效果的景深, 通俗来说就是设置你的眼睛与这个3d元素的距离。
而生活经验告诉我们, 你从远处和近处分别观察同一个物体(比如正方形)时, 其3d效果肯定是不同的。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时, 其子元素会获得透视效果, 而不是元素本身。
注释：该属性必须与 perspective 属性一同使用, 而且只影响 3D 转换元素。
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 300px;
height: 220px;
margin: 100px auto;
border: 1px solid #000;
transform-style: preserve-3d;
perspective: 800px;
/*景深基点基本上没人改*/
perspective-origin: left top;
}
img{
width: 100%;
display: block;
transition: 1s;
}
div:hover>img{
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div>
<img src="img/薛凯琪.jpg"/>
</div>
</body>
</html>backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时, 该属性很有用。
背面隐藏
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 300px;
height: 220px;
margin: 100px auto;
border: 1px solid #000;
transform-style: preserve-3d;
perspective: 1000px;
}
img{
width: 100%;
display: block;
transition: 1s;
transform-origin: left center;
/*背面隐藏*/
backface-visibility: hidden;
}
div:hover>img{
transform: rotateY(-100deg);
}
</style>
</head>
<body>
<div>
<img src="img/薛凯琪.jpg"/>
</div>
</body>
</html>
