CSS3动画

最新推荐文章于 2024-07-12 16:55:56 发布

G018_star sky♬

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量268

点赞数 2

分类专栏： CSS 前端文章标签： CSS 前端

原文链接：https://www.w3cschool.cn/minicourse/play/csscourse?cp=806&gid=0

版权

CSS 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

前端

46 篇文章 0 订阅

订阅专栏

CSS3关键帧和动画

CSS3动画

动画让元素从一种风格逐渐变为另一种风格。
您可以根据需要更改任意数量的CSS属性。
关键帧将保存元素在特定时间的样式。

@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐
变为新样式。
要使动画起作用，必须将动画绑定到元素。
以下示例将更改元素的背景颜色三次：
动画完成50%，完成70%，动画完成100%时。

代码示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color: greenyellow;
				animation-name:linyu;
				animation-duration:1s;
				animation-iteration-count: infinite;
				
				transform: initial;
			}
			@keyframes linyu{
				0%{background-color: darkred;}
				50%{background-color: aqua;}
				70%{background-color: blue;}
				100%{background-color: brown;}
				0%{background-color: darkred;}
			}
			
		</style>
	</head>
	<body>
		<div>linyu</div>
	</body>
</html>

@keyframes规则
作为使用百分比的代替方法，您可以使用from和to关键字，其中：
from-为0%的起始点
to-为100的结束点

下面的两个例子是等价的，并产生相同的结果：

@keyframes w3cschool {
   0% {background-color: red;}
   100% {background-color: green;}
}
@keyframes w3cschool {
   from {background-color: red;}
   to {background-color: green;}
}

执行结果如下：
在这里插入图片描述
animation-name 属性指定要用于元素的动画。
animation-duration 属性指定所选动画的持续时间。
如果未指定animation-duration属性，则动画将不起作用，因为默认值为0。
animation-duration属性以秒为单位指定所选动画的持续时间。
如果动画名称与任何关键帧规则不匹配，则动画将不会执行。

动画属性

(animation-timing-function)动画定时功能指定动画的速度曲线。它可以有以下值：

ease - 指定一个慢启动的动画，然后快速，然后慢慢结束（默认值）
linear - 从开始到结束指定一个具有相同速度的动画
ease-in - 指定一个慢启动的动画
ease-out - 指定一个缓慢结束的动画
ease-in-out - 指定一个缓慢的开始和结束的动画
cubic-bezier(n,n,n,n) - 让你在一个cubic-bezier函数中定义你自己的值
CSS代码：
animation-timing-function: linear;
animation-delay 定义动画开始之前的延迟。

CSS代码：
animation-delay: 2s;
animation-delay和animation-duration的属性值可以用秒(s)和毫秒(ms)来定义

动画属性

先研究一下下面的例子：

div {
animation-name: colorchange;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
可以简写上面的属性设置成同一个属性，将上面的所有效果进行合并。

div {
animation: colorchange 4s ease-in 2s infinite reverse;
}
请注意简写后每一个属性的顺序，不能改变，否则将无法生效

CSS3 3D转换
除了x轴和y轴，3D转换还引入了Z轴，这使得3D操作成为可能。

3D转换与2D转换非常相似：

通过rotateX(), rotateY() 和 rotateZ()函数以给定的度数(deg)围绕相应的轴旋转3D空间中的元素。

div.X {
transform: rotateX(160deg);
}
div.Y {
transform: rotateY(160deg);
}
div.Z {
transform: rotateZ(160deg);
}

执行结果如下：
在这里插入图片描述
您可以使用 transform: none; 关闭元素的所有转换效果。

3D转换方法允许您使用任何CSS长度单位（px,em,%等）

translateX - 水平移动元素

translateY - 垂直移动

translateZ - 移入或移出屏幕。（正值将元素移入，将负值移出）

CSS代码：

.first {
width:250px;
height:100px;
color:white;
background-color:red;
transform: translateX(29px)
translateY(5em)
translateZ(-13px);
}
执行结果：
在这里插入图片描述

translate3d()方法允许我们按照以下顺序同时传递x，y和z偏移量：

.first {
transform: translate3d(-25px, 4em, 15px);
}
像translate3d()方法一样，还有scale3d()和rotate3d()，它们适用于3D中的缩放和旋转元素。

perspective

perspective定义了如何渲染3D场景的深度。将视角看作从观众到物体的距离。值越大，距离越远，视觉效果越不强烈，子元素所呈现的边缘越小。

在为一个元素定义perspective属性时，它是获取perspective视图的子元素，而不是元素本身。

CSS代码：

div.empty-div {
position: relative;
height: 200px;
width: 200px;
margin: 30px;
padding: 10px;
border: 1px solid black;
perspective: 100px;
-webkit-perspective: 100px;
}
div.red-div {
padding: 60px;
position: absolute;
background-color: red;
border: 1px solid white;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}

3D转换示例：

<html>
    <head>
        <style>
            div.X {
                background-color: red;
                width: 150px;
                height: 150px;
                   transform: rotateX(160deg);
            }
            div.Y {
                background-color: red;
                width: 150px;
                height: 150px;
                   transform: rotateY(160deg);
            }
            div.Z {
                background-color: red;
                width: 150px;
                height: 150px;
                  transform: rotateZ(160deg);
            }
            div.empty-div {
                position: relative;
                height: 200px;
                width: 200px;
                margin: 30px;
                padding: 10px;
                border: 1px solid black;
                perspective: 100px;
                -webkit-perspective: 100px;
            }
            div.red-div {
                padding: 60px;
                position: absolute;
                background-color: red;
                border: 1px solid white;
                transform: rotateX(45deg);
                -webkit-transform: rotateX(45deg);
            }
        </style>
    </head>
    <body>
        <div class="X">X</div>
        <div class="Y">Y</div>
        <div class="Z">Z</div>
        <div class="empty-div"><div class="red-div">w3cschool</div></div>
    </body>
</html>

translate()方法

translate()方法从当前位置移动一个元素（根据给定的x轴和y轴的参数）。正值会将元素向下推到其默认位置的右侧，而负值则会将元素向上并拖至其默认位置的左侧。

看下面例子：

CSS代码：
div {
padding: 50px;
position: absolute;
background-color: red;
transform:translate(120px, 60px);
//div元素向右移动120px，向下移动60px
/*transform:translate(-120px,-60px)
div元素向左移动-120px，向上移动60px
*/
}

G018_star sky♬

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画

CSS3关键帧和动画CSS3动画动画让元素从一种风格逐渐变为另一种风格。您可以根据需要更改任意数量的CSS属性。关键帧将保存元素在特定时间的样式。@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。要使动画起作用，必须将动画绑定到元素。以下示例将更改元素的背景颜色三次：动画完成50%，完成70%，动画完成100%时。代码示例如下：<!D...
复制链接

扫一扫