CSS3动画和HTML5新特性详解

一、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

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新特性

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

表单控件：calendar、date、time、email、url、search。

（选择器）
 

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