CSS3转换过渡动画

MonoLog 发布于2019-08-29 12:14 / 2946人阅读

摘要：转换能够对元素进行移动缩放转动拉长或拉伸。和和的参数可以为。过渡该属性和配合使用，实现鼠标移入动画效果。实例动画该属性和配合使用。规则用于创建动画。在中规定某项样式，就能创建由当前样式逐渐改为新样式的动画效果。

CSS3中有三个属性：transform、transition、animation，一直容易搞混，今天特意拎出来理一理。

transform 转换

transform 能够对元素进行移动、缩放、转动、拉长或拉伸。transform 分为2D转换和3D转换，由于目前浏览器对3D转换的支持度还不好，所以以下主要讲解2D转换。

2D转换方法

translate(x,y) 移动，参数为像素值

translateX(n)

translateY(n)

rotate(angle) 转动，参数为角度

scale(x,y) 缩放，参数为倍数

scaleX(n)

scaleY(n)

skew(x-angle,y-angle) 倾斜，参数为角度

skewX(angle)

skewY(angle)

matrix() 参数为六个值的矩阵，可以描述以上所有转换，用于复杂的转换

transform-origin

另外，还有一个transform-origin属性，用来改变被转换元素的位置，一般和rotate()配合使用。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg);         /* IE 9 */
-ms-transform-origin:20% 40%;         /* IE 9 */

-webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */

-moz-transform: rotate(45deg);        /* Firefox */
-moz-transform-origin:20% 40%;        /* Firefox */

-o-transform: rotate(45deg);        /* Opera */
-o-transform-origin:20% 40%;        /* Opera */
}

transform-origin的参数可以为：left、right、center、length、% 。

transition 过渡

该属性和 :hover 配合使用，实现鼠标移入动画效果。
要实现过渡，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

过渡属性

属性	描述
transition	简写属性，在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

实例

div
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}

animation 动画

该属性和 @keyframes 配合使用。

@keyframes

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@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;}
}

@keyframes中也可以用具体的百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在 @keyframes 中创建动画，把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

超融合服务器混合云翻转过渡动画 ios过渡动画 jquery过渡动画 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111761.html

CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
不会做动画的程序猿不是好的动画师（如何用css3动画做动画）

摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。 ...

xeblog 2021-11-11 16:55 评论0 收藏0
过渡和动画

摘要：是一个简写属性，用于设置四个过渡属性过渡时间延迟时间属性速度下面的表格列出了所有的转换属性实例在一个例子中使用所有过渡属性二动画规则如需在中创建动画，您需要学习规则。在中规定某项样式，就能创建由当前样式逐渐改为新样式的动画效果。一、transition 过渡过渡效果一般由浏览器直接改变元素的CSS属性实现，从一种状态过渡到另一种状态。在CSS中创建简单的过渡效果可以从以下几个步骤...

NoraXie 2019-08-30 11:09 评论0 收藏0
前端—初级阶段2(5-8)

摘要：我们可以设置多个关键帧通过百分比将动画序列分割成多个节点在各节点中分别定义各属性通过将动画应用于相应元素样式属性动画名称持续时长默认是。播放方向测试播放完的状态最后一个关键帧第一个关键帧测试播放状态默认是。内容介绍 CSS选择器(基本、层级、属性、伪类、伪状态) CSS常用样式属性 CSS3 过渡、变换、动画 CSS3 3D场景搭建与应用一、CSS选择器 CSS选择器一共有五种...

Aldous 2019-08-30 15:56 评论0 收藏0