CSS3动画新特征有哪些，含义和用法是什么

发布时间：2023-10-24 15:04:01 所属栏目：语言来源：

导读：一、css3动画

css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。

1、transform

transform主要用来改变元素形状：rota

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

（选择器）

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!