小声嘀咕中——勿扰

如今CSS3的动画，JS都能实现，而且提倡的是HTML、CSS、JS三者分离，交互这些东西都可以有JS来实现。那我们CSS3 的动画的意义何在？是不是都没有学习的必要了？那肯定，你懂得。下面：

一、CSS3 的动画基础知识

1.CSS3 转换

A.2D转换
-2D 转换是改变标签在二维平面上的位置和形状
- 移动： translate

div {background-color: lightseagreen;width: 200px;height: 100px;/* 水平垂直移动 100px *//* transform: translate(100px, 100px); *//* 水平移动 100px *//* transform: translate(100px, 0) *//* 垂直移动 100px *//* transform: translate(0, 100px) *//* 水平移动 100px *//* transform: translateX(100px); *//* 垂直移动 100px */transform: translateY(100px)
}

- 旋转： rotate

 div{ /* 旋转 0度 */     transform: rotate(0deg);
}
img:hover {/*顺时针方向旋转 360度 */ transform: rotate(360deg)
}

- 缩放： scale

 div:hover {/* 注意，数字是倍数的含义，所以不需要加单位 *//* transform: scale(2, 2) *//* 实现等比缩放，同时修改宽与高 *//* transform: scale(2) *//* 小于 1 就等于缩放*/transform: scale(0.5, 0.5)}

-2D 转换综合写法以及顺序问题
.格式为 transform: translate() rotate() scale()
.顺序会影响到转换的效果(先旋转会改变坐标轴方向)
.同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

B.3D转换
- 3D 位移：translate3d(x, y, z)

div{/*仅仅是在 x 轴上移动*//*transform: translateX(100px);*//*仅仅是在 y 轴上移动*//*transform: translateY(100px);*//*仅仅是在 Z 轴上移动*//*transform: translateZ(100px);*//*x、y、z 分别指要移动的轴的方向的距离*/transform: translate3d(100px, 100px, 100px);/* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 *//*transform: translate3d(100px, 100px, 0)*/}

-3D旋转rotate3d(x, y, z)

      /*围绕 x 轴正方向旋转130度*//*transform: rotateX(130deg);*//*围绕 y 轴负方向旋转180度*//*transform: rotateY(-180deg);*//*围绕 z 轴正方向旋转130度*//* transform: rotateZ(130deg);*//*沿着自定义轴旋转 45 deg 为角度*/transform: rotate3d(x, y, z, 45deg);/*沿着对角线旋转 45deg*//*transform: rotate3d(1, 1, 0, 180deg);*//* 沿着 x 轴旋转 45deg*//* transform: rotate3d(1, 0, 0, 180deg);*/

- 透视 perspctive

body {/*透视需要写在被视察元素的父盒子上面*/perspective: 1000px;
}

- 3D呈现 transfrom-style

div{/*代码写给父级，但是影响的是子盒子*//*preserve-3d子元素开启立体空间;flat子元素不开启立体空间*/transform-style: preserve-3d;
}

2.CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

/*1.定义动画*/
@keyframes 动画名称 {0% {width: 100px;}100% {width: 200px}
}/*2.使用动画*/
div {/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间；
}

二、CSS3 的动画效果展示区

1.3D骰子动画

效果图如下（示例）：

实现动画的思路：

展现效果	思路及知识点
骰子有六个面	盒子和定位知识
六个面在不同的方向	用到位移和旋转的知识
3d旋转	3D呈现和 CSS3动画知识

部分代码如下（示例）：

section {margin-top: 200px;margin-left: 550px;width: 130px;height: 130px;/*开始3d立体视图*/transform-style: preserve-3d;/*调用动画*/animation: move 12s linear infinite;}/*定义动画，沿着对角线旋转*/@keyframes move {0% {transform: rotate3d(1, 1, 0, 0);}100% {transform: rotate3d(1, 1, 0, 360deg);}}/*鼠标经过，动画暂停*/section:hover {animation-play-state: paused;}div {position: absolute;width: 100%;height: 100%;}/*调盒子的位置*/section div:first-child {transform: translateZ(80px);background: url(images/1.png) no-repeat;}section div:nth-child(2) {transform: translateX(80px) rotateY(-90deg);background: url(images/2.png) no-repeat;}section div:nth-child(3) {transform: translateZ(-80px);background: url(images/3.png) no-repeat;}section div:nth-child(4) {transform: translateX(-80px) rotateY(90deg);background: url(images/4.png) no-repeat;}section div:nth-child(5) {transform: translateY(-80px) rotateX(-90deg);background: url(images/2.png) no-repeat;}section div:last-child {transform: translateY(80px) rotateX(90deg);background: url(images/1.png) no-repeat;}

2.西游记四人行

效果图如下（示例）：

实现动画的思路：

展现效果	思路及知识点
四个小人	四个盒子和背景图定位知识
四个小人走路	CSS3动画知识
注意	背景图测量的大小

代码如下（示例）：

 <div class="box"><div class="wk"></div><div class="wn"></div><div class="ts"></div><div class="wj"></div></div>

 <style>body {background: url(images/bac.webp) no-repeat;}.box {margin: 400px 0 0 400px;width: 775px;height: 235px;}.wk,.wn,.ts,.wj {float: left;}.wk {width: 180px;height: 165px;background: url(images/west_01.png);animation: move 1s steps(8) infinite;}.wn {width: 210px;height: 165px;background: url(images/west_02.png);animation: move 1s steps(8) infinite;}.ts {width: 170px;height: 240px;background: url(images/west_03.png);animation: tsz 1s steps(8) infinite;}.wj {width: 210px;height: 165px;background: url(images/west_04.png);/*调用动画*/animation: wj 1s steps(8) infinite;}/* 定义动画 */@keyframes move {from {background-position: 0 0;}to {background-position: -1600px 0;}}   @keyframes tsz {from {background-position: 0 0;}to {background-position: -1360px 0;}}  @keyframes wj {from {background-position: 0 0;}to {background-position: -1680px 0;}}</style>

希望能帮助大家！！！！！！

3秒钟，教你玩转CSS3动画相关推荐

手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2 ...
jQuery动画基础讲解(教你玩转jQuery动画)
文章目录动画效果显示和隐藏动画展开和收入动画淡入淡出动画自定义动画 stop和delay方法 stop()方法 delay()方法动画效果显示和隐藏动画 show() hide() $( ...
轻松制作GIF动画！教你玩转PS时间轴之5个小技巧篇
通过前两篇文章,我们已经知道制作动画的基本知识的和技巧,下面通过5个非常有用的知识点跟大家更深入地探索PS时间轴.文末附上PSD,可以下载后自行分析动画技巧. 往期回顾: <新手指南!手把手教你 ...
轻松制作GIF动画！教你玩转PS时间轴之进阶技巧篇
上一篇文章跟大家讲过PS时间轴的基础,接下来跟大家分享制作简单GIF动画的一些技巧,(文字动画.颜色渐变.咻一咻动画.模糊动画.旋转时钟以及变化的月亮等等),文章提到的动画都有提供打包下载,想学时间轴 ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
svg配合css3动画_与Sarah Drasner一起使用CSS，JS和SVG进行动画处理，并避免倦怠
svg配合css3动画 In this episode of the Versioning Show, Tim and David are joined by Sarah Drasner, a tea ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...

3秒钟，教你玩转CSS3动画

文章目录