接了任务一直犯拖延症，一直拖到现在才开始做任务，先say 个
sorry。这篇文章主要说网页动画的，侧重的是CSS3动画。闲话不多说，那就开始吧！
一.先聊聊动画是什么吧。
- 动画的本质是定时器改变元素的属性，浏览器的渲染过程
- 动画是关于时间的函数
二、再说说动画的种类
1.Javascript 动画
- DOM动画
- Canvas 动画
2.CSS3动画
- transition
- animation
3.SVG动画
三.切入正题CSS3动画吧！
在CSS3中为我们提供了三种用来做动画的方法：transition、transform和animation。
1.transition过渡
CSS3的transition允许CSS的属性值在一定的时间内平滑地过渡。
要实现这一点，它规定了两点
- 规定您希望把效果添加到哪个 CSS 属性上（应用地点）
- 规定效果的时长（应用时间）
兼容性
transition兼容性
属性
- transition-property: 设置过渡效果的css属性名。
- transition-duration: 设置完成该效果的过渡时间。
- transition-timing-function: 设置过度时所用的速度。
主要有的函数有：ease减速；linear匀速；ease-in加速；ease-out减速；ease-in-out先加速后减速。 - transition-delay: 设置延迟时间。
实例
语法顺序是：transition: property duration timing-function delay;
// 简单例子 用于宽度属性的过渡效果，时间为3s，速度为ease，延迟时间为1s
.content{
transition: width 3s ease 1s;
}
缺点
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，想要使用一次，就得触发一次。
- transition只能定义开始状态和结束状态，不能定义中间状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
2.transform变换
transform变换分为2D变换和3D变换，但是这里暂时只讨论2D变换。2d类的动画沿着x轴和y轴的变化，对元素进行旋转、缩放、移动或倾斜。
工作原理：
- 转换是使元素改变形状、尺寸和位置的一种效果。
- 您可以使用 2D 或 3D 转换来转换您的元素。
兼容性
transform兼容性
属性
- transform: rotate();旋转。单位是deg,度。对此，也衍生出了rotateX()和rotateY();分别代表绕着X轴和Y轴旋转。
- transform: skew();倾斜。衍生出了skewX()和skewY();分别代表绕着X轴和Y轴倾斜。
- transform: scale();缩放，按倍数计算。衍生出了scaleX()和scaleY();分别代表缩放X轴或Y轴。
- transform: translate();位移。衍生出了translateX()和translateY();分别代表X轴或Y轴的位移量。
实例
// transform: rotate()
//通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
//transform: skew()
//通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
//transform: translate()
//通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
//scale() 方法
//通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
//matrix() 方法
//matrix() 方法把所有 2D 转换方法组合在一起。
//matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
3.animation动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
animation利用@keyframes关键帧完成动画的制作。其格式为@keyframes 动画名 {规则}。
兼容性
animation兼容性
属性
- animation-name: 动画名称
- animation-duration: 完成动画所需时间
- animation-timing-function: 完成动画的速度函数
- animation-delay: 延迟时间
- animation-iteration-count: 播放次数。默认1，其中，infinite表示无限次播放。
- animation-direction: 是否轮流反向播放动画。normal正常播放；alternate奇次数反向播放。
实例
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
//keyframes
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
CSS3动画就简单聊这些吧，下面说下其他的。
四.
// CSS选择器介绍
// 阮一峰 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
// 1. 4种基本选择器
CSS 2.1
// 2. 4种多元素的 组合选择器
div,p 同时匹配
div div 匹配后代
div > p 匹配子元素
div + div 匹配同级的下一个元素(仅匹配一个)
其中 div p 与 div > p的区别
前者匹配全部的后代元素，而后者仅匹配向下一层（子元素）
// 3. 4种属性选择器 根据某类的属性来查找选择器
E[att]
E[att=val]
// 4. 伪类选择器 实际不存在的类
E:first-child
E:link
E:lang(c)
// 5. 伪元素
E:first-line
E:first-letter
E:before
CSS 3
//
CSS 3 中的新特性
// 应该利用 CSS 3 generator生成CSS3代码(上课会讲)
border-radius 边框倒角
box text shadow 盒子阴影
transform 2D 变形
Multi Column 将文本分隔成多列
transition 动画
keyframe 动画和生成器
https://daneden.github.io/animate.css/
http://cssanimate.com/
其他 css3 生成器
http://css3generator.com/
http://www.css3generator.in/
http://css3.me/
https://www.tutorialspoint.com/css/css3_boarder_image.htm
网友评论