目录

  • 一、动画使用
    • 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代码：

<div class="box">animation-timing-function:<b>ease效果</b><div class="timing_ease"></div></div><div class="box">animation-timing-function:<b>linear效果</b><div class="timing_linear"></div></div><div class="box">animation-timing-function:<b>steps效果</b><div class="timing_steps"></div></div><div class="box">animation-delay:<b>2s效果（2秒后再执行动画）</b><div class="delay"></div></div><div class="box">animation-iteration-count:<b>1(只执行1次动画)</b><div class="iteration_count_1"></div></div><div class="box">animation-iteration-count:<b>infinite(不断执行动画)</b><div class="iteration_count_infinite"></div></div><div class="box">animation-direction:<b>normal(不回溯)</b> 动画重复1次以上，才有效果<div class="direction_normal"></div></div><div class="box">animation-direction:<b>alternate(动画结束回溯)</b> 动画重复1次以上，才有效果<div class="direction_alternate"></div></div><div class="box">animation-fill-mode:<b>backwards(返回到0%的状态)</b><div class="fill_mode_backwards"></div></div><div class="box">animation-fill-mode:<b>forwards(返回到100%的状态)</b><div class="fill_mode_forwards"></div></div>

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的同时向下移动50px
translateX(100px) 向右移动100px
translateY(50px) 向下移动50px
rotate
旋转 		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代码：

<h1>移动：</h1><div class="clearfix"><div class="box">translate(100px, 50px)<div class="translate"></div></div><div class="box">translateX(100px)<div class="translateX"></div></div><div class="box">translateY(50px)<div class="translateY"></div></div></div><h1>旋转：</h1><div class="clearfix"><div class="box">rotate(30deg)<div class="rotate_30deg"></div></div><div class="box">rotate(-30deg)<div class="rotate_-30deg"></div></div><div class="box">transform-origin:left bottom;(定义修改中心点，默认50% 50%)<div class="transform_origin_left_bottom"></div></div></div><h1>放大：</h1><div class="clearfix"><div class="box">scale(1.5,2)<div class="scale1"></div></div><div class="box">scale(2)<div class="scale2"></div></div></div>

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轴移动100px
translate3d(50px,50px,50px) 向X轴、Y轴、Z轴同时移动50px
rotate
旋转 		rotateX(180deg) 围绕X轴顺时针旋转180°
rotateY(180deg) 围绕Y轴顺时针旋转180°
rotateZ(45deg) 围绕Z轴顺时针旋转45°
rotate3d(30deg,45deg,60deg) 围绕X轴顺时针旋转30°的同时
围绕X轴顺时针旋转45°
围绕Y轴顺时针旋转60°
查看元素的距离 perspective:500px 给父元素添加，子元素距离视图500px
3d呈现 transform-style:preserve-3d 给父元素添加，表示使所有子元素3d的方式呈现


HTML代码：

<div class="move clearfix"><h1>3D移动</h1><div class="box">translateZ(50px)<div class="translateZ"></div></div><div class="box">translateX(50px)<div class="translateX"></div></div><div class="box">translateY(50px)<div class="translateY"></div></div><div class="box">translate3d(50px,50px,50px)<div class="translate3d"></div></div></div><div class="rotate clearfix"><h1>3D旋转</h1><div class="content">rotateX(180deg);<div class="box"><div class="rotateX"></div></div><div class="box2"></div><span class="x">X轴</span><span class="y">Y轴</span><span class="z">Z轴</span></div><div class="content">rotateY(180deg);<div class="box"><div class="rotateY"></div></div><div class="box2"></div><span class="x">X轴</span><span class="y">Y轴</span><span class="z">Z轴</span></div><div class="content">rotateZ(45deg);<div class="box"><div class="rotateZ"></div></div><div class="box2"></div><span class="x">X轴</span><span class="y">Y轴</span><span class="z">Z轴</span></div></div>

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);}
}

CSS动画（快速入门）相关推荐

  1. html+css+js+快速入门

    html 1.a标签 <!--使用name作为标记--> <a name="top">顶部</a> <!--target:表示窗口在哪里打 ...

  2. HTML+JS+CSS+xml快速入门

    一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...

  3. Html+Css+JavaScript快速入门

    --------HTML基础-------- Hyper Text Markup Language:超文本标记语言. 什么是超文本:不仅仅是文本,还包括文本的样式(字体 大小 颜色等),还包括多媒体( ...

  4. Confluence 6 CSS 编辑快速入门

    希望编辑空间的 CSS 样式表: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and Feel) . 然后选择 样式表(Stylesheet) ...

  5. CSS+HTML快速入门 链接样式雪碧图（案例）

    目录 一.伪类的使用 1.html部分: 二.横向主菜单 1.images图片部分: 2.css部分: 3.html部分: 三.外部样式 1.css部分: 2.html部分: 四.制作顶部菜单(综合) ...

  6. css 动画使用_如何在CSS中使用动画

    css 动画使用 使用CSS动画 (Using CSS Animations) CSS animations add beauty to the webpages and make transitio ...

  7. 腾讯云云直播CSS产品概述和快速入门

    腾讯云云直播CSS产品概述 云直播(Cloud Streaming Services)为您提供极速.稳定.专业的直播云端处理服务,根据业务中不同直播场景的需求,云直播提供标准直播.慢直播.快直播和云导 ...

  8. CSS超基础，快速入门

    title: CSS date: 2022-11-20 12:12:57 categories: 前端 tags: CSS 个人博客www.huangrd.top, CSS 1.CSS介绍 1.1什么 ...

  9. 彻底弄懂CSS盒子模式一(DIV布局快速入门)

    ­彻底弄懂CSS盒子模式一(DIV布局快速入门) ­ ­作者:唐国辉 ­ ­实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...

  10. 前端学习之CSS快速入门-2021-09-20~22

    CSS快速入门 什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 网页动画(特效效果) ...

最新文章

  1. 深度学习核心技术精讲100篇（七十四）-教你如何最快入门用户画像
  2. uva 1557 - Calendar Game(博弈)
  3. how to use object based exception combined with message class in SE91
  4. css页面布局的感想,css布局实践感想(示例代码)
  5. 依赖注入框架 wire
  6. Android MediaPlayer 音频倍速播放，调整播放速度
  7. 配置VS2008本地调试.NETFRAMEWORK源代码
  8. 黑匣子_NOI导刊2010提高 (对顶堆)
  9. C++--第2课 - C++中的引用
  10. c语言课程设计实训主要目的,C语言课程设计实训指导书.doc
  11. DM860步进电机接线及拨码
  12. 城市智慧灯杆解决方案
  13. 以接口请求的方式，解决移动端页面中字体文件过大的问题
  14. 即插即用！Batch Transformer
  15. 计算机配置有哪10个,win10配置有什么要求 win10配置要求及特点介绍【图文】
  16. ubuntu下安装wps出现系统缺失字体问题？
  17. 解决阿里云盘分享文件数量太多而无法分享的问题
  18. c语言编程基础之IPC共享内存
  19. ctf你好 1.1:灵魂拷问
  20. 如何选择指针中置空？NULL， nullptr， 0？

热门文章

  1. 3DsMAX 单独导出一个对象到UE
  2. QT5.14.2自带Examples：Bars
  3. C++ 学习笔记之---类的自动转换
  4. 域名怎么买：一口价购买！
  5. Modbus网关在锂电池干燥箱的应用
  6. 斯伦贝谢在休斯敦开设INNOVATION FACTORI以扩张全球人工智能网络
  7. （三）Alian 的 Spring Cloud Eureka Server（服务注册中心）
  8. 一年读了200本书，但我感觉没有半点用
  9. torch_scatter.scatter()的使用方法详解
  10. 如何推动企业财务数字化建设，全面打造预算系统？