Css3动画简介

使用@keyframes 动画名 创建一个动画

语法:

@keyframes animationname {

step {css-styles;}

}

  • 红色部分为固定格式
  • 绿色部分为动画名称
  • 蓝色部分步骤
  • 紫色部门为css样式

描述

animationname

必需。定义动画的名称。

step

必需。动画时长的百分比,可以有多个。

合法的值:

  • 0-100%
  • from(与 0% 相同)
  • to(与 100% 相同)

css-styles

必需。一个或多个合法的 CSS 样式属性。


下面来创建一个改变颜色的动画案例

<style>

.box{

width: 100px;

height: 100px;

border: 1px solid gray;

background-color: aqua;

margin: 0px auto;

position: relative;

align-self: center;

-webkit-animation: moveBox 3s linear ;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes moveBox

{

0% {background-color: chartreuse;top:0px;left: 0px;}

25% {background-color:red;top: 0px;left:200px;}

50% {background-color:greenyellow;top:200px;left:200px;}

75% {background-color:skyblue;top:200px;left:0px;}

100%{background-color:black;top:0px;left:0px;}

}

</style>

___________________________________________________________________________________________________________

使用animation绑定一个动画:

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

animation为下列属性的缩写

属性

描述

@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-fill-mode

规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式

animation-play-state

规定动画是否正在运行或暂停。默认是 “running”。


animation-timing-function 的有效值

描述

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

注意兼容性写法

火狐浏览器:@-moz-keyframes

谷歌浏览器:@-webkit-keyframes

Css3动画简介

转载请注明来源:幽幽过客_{Css3动画简介}