解析css3属性——动画

最新推荐文章于 2024-01-14 09:41:07 发布

宋小米

最新推荐文章于 2024-01-14 09:41:07 发布

阅读量650

点赞数 1

分类专栏：前端开发文章标签： css3 动画浏览器

本文链接：https://blog.csdn.net/song_mou_xia/article/details/50814874

版权

前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Css3的动画属性主要有transition（过度）和动画（animation）

一、属性解析

Transition下的属性，支持的浏览器有Internet Explorer 10、Firefox、Chrome 以及 Opera。属性可以省略一起写，也可以分开申明属性值;

例如：1、-webkit-transition:width 2s…

2、 -webkit-transition-property:width;

-webkit-transition-duration:2s’

所有属性：

transition-property: 用于动画的css属性，例如：width，height，background；

transition-duration: 过度花费时间，默认0；

transition-timing-function:过度的时间曲线，默认ease，还有如下属性；

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
Ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier函数中定义自己的值。可能的值是 0至 1之间的数值
Transition-delay:	过度效果何时开始，延迟时间

动画：

div

{width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

animation 属性

Animation-name:动画名称：

Animation-duration:完成一个周期所花费的时间

transition-timing-function:过度的时间曲线，默认ease，还有如下属性；

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
Ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier函数中定义自己的值。可能的值是 0至 1之间的数值
Transition-delay:	过度效果何时开始，延迟时间

Animation-iteration-count: 规定被播放的次数；n指定次数；infinite无限次数播放

Animation-direction: 是否在下一周期逆向播放；normal默认正常播放；alternate轮流反向播放；

Animation-play-state:是否正在运行和暂停；paused暂停；running正在播放；

Animation-fill-mode:动画时间之外状态;有如下

none	不改变默认行为。
Forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

@keyframes 规则
：创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同.0%是开始，100%动画完成

二、综合运用的例子

首先创建一个demo.html网页：

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <title></title>
</head>
<body>
 <div class="dd">这是一个边框像素值</div>   
</body>
</html>

然后编写demo.css文件完成动画：

.dd{
	width: 100px;
	height:100px;
	 background:red;
	 padding:15px;
	 text-align:center;
	 position:absolute;
	 border-radius: 2em;
	 top:20px;
     -webkit-animation:myfirst;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
}
.dd:hover{
	width:200px;
	height:200px;
}
@keyframes myfirst{
0% {-webkit-transition:width 2s; background:green;}
50% {-webkit-transition:height 2s;background:purple;}
75% {transform:rotate(0deg) translate(100px); background:yellow;}
100%{transform:rotate(360deg) translate(100px);background:pink;}
}

宋小米

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解析css3属性——动画

Css3的动画属性主要有transition（过度）和动画（animation）一、属性解析Transition下的属性，支持的浏览器有Internet Explorer 10、Firefox、Chrome 以及 Opera。属性可以省略一起写，也可以分开申明属性值;例如：1、-webkit-transition:width 2s… 2、 -webkit-transit
复制链接

扫一扫

专栏目录