您的位置：首页 > Web前端 > CSS

CSS3中动画实现的方法

2020-07-14 06:27 615 查看

CSS3中动画实现的方法

一、 transition 属性（过渡）
二、 transform 属性（转变）
三、animation属性（动画）

一、 transition 属性（过渡）

transition:定义了元素在变化过程中是怎么样的
语法

transition: property duration timing-function delay;

1.transition-property: 接要改变的属性，如width,height,all等;
2.transition-duration: 定义了过渡效果花费的时间;
3.transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”;
4.transition-delay: 规定过渡效果何时开始。默认是 0 ;
实现过渡动画必须满足俩点
1.指定要添加过渡效果的CSS属性（或者all）
2.指定过渡效果的持续时间

示例代码

<style>
#box{
width:200px;
height:200px;
background-color:red;
}
.divadd:hover {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;

transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
}
</style>
</head>

<body>
<div class="divadd" id="box">
</div>
</body>

二、 transform 属性（转变）

transform:定义了元素的变化的最终结果
属性定义及使用说明
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法

transform: none|transform-functions;

1.translate(x,y):定义 2D 转换，沿着 X 和 Y 轴移动元素;
2.translateX(n):定义 2D 转换，沿着 X 轴移动元素;
3.translateY(n):定义 2D 转换，沿着 Y 轴移动元素;
4.scale(x,y):定义 2D 缩放转换，改变元素的宽度和高度;
5.rotate(angle):定义 2D 旋转，在参数中规定角度;
6.skewX(angle):定义 2D 倾斜转换，沿着 X 轴;
7.translate3d(x,y,z):定义 3D 转;
8.scale3d(x,y,z):定义 3D 缩放转换;
代码示例：

<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>

三、animation属性（动画）

animation:动画定义了动作的每一帧(@keyframes)有什么效果

1.animation-name:规定@keyframes 动画的名称;
2.animation-duration:规定动画完成一个周期所花费的时间（秒或毫秒），默认是0;
3.animation-timing-function:规定动画的速度曲线，默认是’ease’;
4.animation-delay:规定动画何时开始，默认是0;
5.animation-iteration-count:规定动画播放的次数，默认是1;
6.animation-direction:规定动画是否在下一周期逆向地播放,默认是 “normal”;

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

代码示例：

<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
0%{left:0px;}
100% {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>

以上百分比后的方括号内可以添加各种属性值，比如transform ratote、left…

更多属性和值请查阅W3C！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航