目录
一、动画使用1.创建动画与调用动画2.动画属性
二、2D操作三、3D操作
一、动画使用
1.创建动画与调用动画
div {
width: 200px;
height: 100px;
/* 调用动画 */
animation: change_color 2s;
}
/* 创建动画（声明动画） */
@keyframes change_color {
0% {
background-color: pink;
}
100% {
background-color: green;
}
}
2.动画属性
属性参数说明animation-name动画名称（必填）move使用名为"move"的动画animation-duration动画持续时间（必填）2s动画持续两秒animaiton-timing-function速度曲线ease有停顿linear匀速steps（n）步长animation-delay动画延時2s动画两秒后再播放animation-iteration-count重复次数2动画重复2次infinite动画重复无数次animation-direction动画结束是否反向播放normal不反向播放alternate动画回溯animation-fill-mode动画结束状态backwards返回0%的状态forwards停留在100%状态animation-play-state动画停止paused停止动画复合写法animation:move 2s linear 2s infinate alternate使用名“move”的动画，持续2秒，匀速播放动画，延時2秒，无线播放，动画结束回溯
HTML代码：
animation-timing-function:ease效果
animation-timing-function:linear效果
animation-timing-function:steps效果
animation-delay:2s效果（2秒后再执行动画）
animation-iteration-count:1(只执行1次动画)
animation-iteration-count:infinite(不断执行动画)
animation-direction:normal(不回溯) 动画重复1次以上，才有效果
animation-direction:alternate(动画结束回溯) 动画重复1次以上，才有效果
animation-fill-mode:backwards(返回到0%的状态)
animation-fill-mode:forwards(返回到100%的状态)
div.box {
float: left;
width: 600px;
height: 100px;
}
div.box div {
/* 调用动画 */
background-color: pink;
width: 100px;
height: 50px;
animation: change_color 2s;
}
/* 速度曲线 */
div.box .timing_ease {
animation-timing-function: ease;
}
div.box .timing_linear {
animation-timing-function: linear;
}
div.box .timing_steps {
animation-timing-function: steps(5);
}
/* 延時 */
div.box .delay {
animation-delay: 2s;
}
/* 动画重复次数 */
div.box .iteration_count_1 {
animation-iteration-count: 1;
}
div.box .iteration_count_infinite {
animation-iteration-count: infinite;
}
/* 动画是否反向播放 */
div.box .direction_normal {
animation-iteration-count: infinite;
animation-direction: normal;
}
div.box .direction_alternate {
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* 动画结束状态 */
div.box .fill_mode_backwards {
animation-fill-mode: backwards;
}
div.box .fill_mode_forwards {
animation-fill-mode: forwards;
}
/* 创建动画（声明动画） */
@keyframes change_color {
0% {
background-color: pink;
width: 100px;
height: 50px;
}
100% {
background-color: green;
width: 50px;
height: 25px;
}
}
二、2D操作
属性参数说明translate移动translate(100px, 50px)向右移动100px的同时向下移动50pxtranslateX(100px)向右移动100pxtranslateY(50px)向下移动50pxrotate旋转rotate(30deg)顺时针旋转30°rotate(-30deg)逆时针旋转30°transform-origin：left bottom修改 “旋转中心点” 为左下角scale放大scale(1.5,2)宽度放大1.5倍，高度放大2倍scale(2)宽度和高度同时放大两倍综合写法translate(50px,100px) rotate(30deg) scale(2)移动和旋转和变大一起播放
HTML代码：
移动：
translate(100px, 50px)
translateX(100px)
translateY(50px)
旋转：
rotate(30deg)
rotate(-30deg)
transform-origin:left bottom;(定义修改中心点，默认50% 50%)
放大：
scale(1.5,2)
scale(2)
CSS代码：
.clearfix::after,
.clearfix::before {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
div.box {
float: left;
width: 200px;
height: 200px;
margin-left: 10px;
background-color: pink;
}
div.box div {
width: 50px;
height: 50px;
background-color: green;
animation-iteration-count: infinite !important;
}
div.box div.translate {
animation: move1 2s;
}
div.box div.translateX {
animation: move2 2s;
}
div.box div.translateY {
animation: move3 2s;
}
@keyframes move1 {
100% {
transform: translate(100px, 50px);
}
}
@keyframes move2 {
100% {
transform: translateX(100px);
}
}
@keyframes move3 {
100% {
transform: translateY(50px);
}
}
div.box div.rotate_30deg {
animation: rotate1 2s;
}
div.box div.rotate_-30deg {
animation: rotate2 2s;
}
div.box div.transform_origin_left_bottom {
animation: rotate3 2s;
}
@keyframes rotate1 {
100% {
transform: rotate(30deg);
}
}
@keyframes rotate2 {
100% {
transform: rotate(-30deg);
}
}
@keyframes rotate3 {
100% {
transform: rotate(45deg);
transform-origin: left bottom;
}
}
div.box div.scale1 {
margin-top: 50px;
animation: scale1 2s;
}
div.box div.scale2 {
margin-top: 50px;
animation: scale2 2s;
}
@keyframes scale1 {
100% {
transform: scale(1.5, 2);
}
}
@keyframes scale2 {
100% {
transform: scale(2);
}
}
三、3D操作
属性参数说明translate移动translateZ(100px)向Z轴移动100pxtranslate3d(50px,50px,50px)向X轴、Y轴、Z轴同时移动50pxrotate旋转rotateX(180deg)围绕X轴顺时针旋转180°rotateY(180deg)围绕Y轴顺时针旋转180°rotateZ(45deg)围绕Z轴顺时针旋转45°rotate3d(30deg,45deg,60deg)围绕X轴顺时针旋转30°的同时 围绕X轴顺时针旋转45° 围绕Y轴顺时针旋转60°查看元素的距离perspective:500px给父元素添加，子元素距离视图500px3d呈现transform-style:preserve-3d给父元素添加，表示使所有子元素3d的方式呈现
HTML代码：
3D移动
translateZ(50px)
translateX(50px)
translateY(50px)
translate3d(50px,50px,50px)
3D旋转
rotateX(180deg);
X轴
Y轴
Z轴
rotateY(180deg);
X轴
Y轴
Z轴
rotateZ(45deg);
X轴
Y轴
Z轴
CSS代码：
.clearfix::after,
.clearfix::before {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
.move .box {
position: relative;
float: left;
width: 250px;
height: 200px;
margin-left: 10px;
background-color: pink;
perspective: 400px;
transform-style: preserve-3d;
}
.move .box div {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
width: 50px;
height: 50px;
background-color: green;
animation-iteration-count: infinite !important;
}
.translateZ {
animation: translateZ 2s;
}
@keyframes translateZ {
100% {
transform: translateZ(50px);
}
}
.translateX {
animation: translateX 2s;
}
@keyframes translateX {
100% {
transform: translateX(50px);
}
}
.translateY {
animation: translateY 2s;
}
@keyframes translateY {
100% {
transform: translateY(50px);
}
}
.translate3d {
animation: translate3d 2s;
}
@keyframes translate3d {
100% {
transform: translate3d(50px, 50px, 50px);
}
}
.rotate .content {
position: relative;
float: left;
width: 250px;
height: 200px;
margin-left: 10px;
border: 1px solid pink;
perspective: 400px;
transform-style: preserve-3d;
}
.content .box {
position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateY(-45deg) !important;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.content .box2 {
position: absolute;
z-index: 999;
top: 50px;
left: 30px;
width: 100px;
height: 100px;
transform: rotateY(45deg) !important;
border-bottom: 1px solid #000;
}
.content .x {
position: absolute;
top: 125px;
left: 186px;
}
.content .y {
position: absolute;
top: 28px;
left: 120px;
}
.content .z {
position: absolute;
top: 125px;
left: 18px;
}
.rotate .content .box div {
position: absolute;
left: -25px;
bottom: -25px;
width: 50px;
height: 50px;
background-color: green;
animation-iteration-count: infinite !important;
}
.rotateX {
animation: rotateX 2s;
}
@keyframes rotateX {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(180deg);
}
}
.rotateY {
animation: rotateY 2s;
}
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
.rotateZ {
animation: rotateZ 2s;
}
@keyframes rotateZ {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(45deg);
}
}
文章链接
发表评论