CSS3动画和HTML5新特性详解

一、css3动画

& # 9786;css3动画相对于通过JavaScript动态 改变 元素样式性能更好，更加容易。CSS3中有三个关于动画的属性： transform 、 trans IT ion 和 animation 。
1、transform
transform 主要用来改变元素形状： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵 变形 ）。
例：

.transform-class {
    transform ： rotate(30 deg ) scale(2,3);
}

1.1、transform-ori gin 基点
所有变形都基于基点，基点默认为元素的中心点。用法： transform-origin:(x,y) ，X、Y可以是百分比、px、rem，也可以是left、right、 center （X）和top、center、bottom（Y）。
例：

.transform-class {
    transform-origin: (left, bottom);
}

1.2、rotate旋转
通过指定的角度对元素进行旋转变形，若 正数 则为顺时针旋转，若负数则为逆时针旋转。
例：

.transform-rotate {
    transform: rotate(30deg);
}

1.3、scale缩放
scale 有三种用法： scale(x,y) 、 scaleX(x) 、 scale(Y) 。缩放比例如果大于1则放大，等于1 为原始大小，小于1则缩小。
例：

.transform -s cale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

1.4、translate移动
translate 有三种情况： translate(x,y) 、 trans latex (x) 、 translateY(y) 。
例：

.transform -t ranslate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

1.5、skew扭曲
skew 有三种写法： skew(xdeg,ydeg) 、 skewX(xdeg) 、 skewY(ydeg) ，单位deg为角度。
例：

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

1.6、matrix
略matrix详述
2、transition
transition 是用来设置元素是如何从一种状态 平滑 到另外一种状态：

transition- PR o PE rty （变换的属性） transition-duration （变换延续的时间） transition-timing-function （变换的 速率 ） transition-delay （变换的延迟）

3、animation
animation 比较类似于flash中的逐帧动画，就像 电影 的播放一样，表现非常细腻并且有非常大的灵活性。而transition只指定了 开始 和结束状态。逐帧动画由关键帧组成，很多个关键帧的连续播放就组成了动画，在CSS3中是由属性keyfr am es来完成逐帧动画的。
@keyframes

animationName：动画名称（自己命名） percentage：百分比值 [pəˈsentɪdʒ] properties：样式属性名称（color、left等）
&nbs p;

例：

@keyframes animationName {
    From  {
       properties: value;
   }
   percentage {
       properties: value;
   }
   to {
       properties: value;
   }
}
//or
@keyframes animationName {
   0% {
       properties: value;
   }
   percentage {
       properties: value;
   }
   100% {
       properties: value;
   }
}

二、H5新特性

用于绘画 canvas 元素。 用于媒介回放的 video 和 audio 元素。 本地离线存储至localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。 （ 新标签 ）语意化更好的内容元素

表单控件：calendar、date、time、em ai l、url、se Arch 。

（ 选择器 ）
 

到此这篇关于CSS3动画和HT ML 5新特性详解的 文章 就介绍到这了,更多相关css3动画 html5新特性内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS3动画和HTML5新特性详解 全部内容，希望文章能够帮你解决 CSS3动画和HTML5新特性详解 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3动画和HTML5新特性详解的详细内容...