CSS3动画和HTML5新特性详解
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
一、css3动画
☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。
1、transform
transform主要用来改变元素形状：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。
例：
.transform-class {
transform ： rotate(30deg) scale(2,3);
}
1.1、transform-origin基点
所有变形都基于基点，基点默认为元素的中心点。用法：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-scale {
transform: scale(2,1.5);
}
.transform-scaleX {
transform: scaleX(2);
}
.transform-scaleY {
transform: scaleY(1.5);
}
1.4、translate移动
translate有三种情况：translate(x,y)、translateX(x)、translateY(y)。
例：
.transform-translate {
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-property（变换的属性）transition-duration（变换延续的时间）transition-timing-function（变换的速率）transition-delay（变换的延迟）
3、animation
animation比较类似于flash中的逐帧动画，就像电影的播放一样，表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成，很多个关键帧的连续播放就组成了动画，在CSS3中是由属性keyframes来完成逐帧动画的。
@keyframes
- animationName：动画名称（自己命名）
- percentage：百分比值 [pəˈsentɪdʒ]
- properties：样式属性名称（color、left等）
例：
@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、email、url、search。
（选择器）
到此这篇关于CSS3动画和HTML5新特性详解的文章就介绍到这了,更多相关css3动画 html5新特性内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了css3实现动画的三种方式，帮助大家更好的理解和学习css3，感兴趣的朋友可以了解下2020-08-24
这篇文章主要介绍了如何使用css3实现一个类在线直播的队列动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下2020-06-17- 有好多小伙伴私聊我问我html5新特性 和用法，下面我给大家具体介绍一下html5都新加了哪些新特性，感兴趣的朋友跟随程序员之家小编一起看看吧2018-09-13
- 这篇文章主要介绍了使用html5新特性轻松监听任何App自带返回键的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-13
- 这篇文章主要介绍了HTML5新特性之type=file文件上传功能,需要的朋友可以参考下2018-02-02
- HTML5 只有一个简单的文档类型：<!DOCTYPE html>，表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签，感兴趣的朋友一起看看吧2017-10-31
- HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。所以当我们在面试前端工作的时候，遇到html5相关的问题一点也不意外，想要顺利通过前端面试？下面这篇文章就来跟2017-09-05
最新评论