CSS3 -webkit-animation(动画)

@-webkit-keyframes name{

}

-webkit-animation : name duration iteration-count direction timing-function fill-mode delay

或者

@-webkit-keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}

#box {
  -webkit-animation-name: fontbulger;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count:3;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 2s;
}

-webkit-animation:仍旧是一个复合属性，

-webkit-animation: name duration timing-function delay iteration_count direction;

包括以下几个属性

（1） -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用

eg:

@-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大

div{-webkit-animation-name:fontchange;}

（2）-webkit-animation-duration 表示动画持续的时间

（3）-webkit-animation-timing-function 表示动画使用的时间曲线

【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

（4）-webkit-animation-delay 表示开始动画之前的延时

【语法】 -webkit-animation-delay: delay_time;

（5）-webkit-animation-iteration-count 表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

（6） -webkit-animation-direction 表示动画的方向

【语法】-webkit-animation-direction: normal(默认) | alternate

normal 方向始终向前

alternate 当重复次数为偶数时方向向前，奇数时方向相反

【另外】跟animation有关的其他属性

（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结

果不是很清晰）

（2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态

CSS3 -webkit-animation(动画)相关推荐

css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
css3 transform animation 动画小结
css3 transform animation 动画小结最近在策划自己的博客,本来是想写一个酷炫可以让人玩的,全是动画的页面, 结果哎 - - 可以说是非常失败了,这是一个刷牙的动画,变色的 ...
第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由"keyframes& ...
css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
CSS3利用animation动画实现多个图标在指定间隔后再次动作
一.实现思路: 当有多个图标要实现同一 animation ,但是每个图标的 animation 又不能互相干扰,可以利用以下这个公式去设置动画的属性 @keyframes 动画名称选择百分比实现 ...
css3的animation动画属性实现闹钟左右摇摆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！
CSS3的animation实在是让人爱不释手,越用越觉得离不开了.较高的性能以及和js的逻辑无关性,可以专注于动画效果本身,真的很不错,尤其在手机上,只需主要考虑webkit内核的,更是爽,但随着使 ...
Javascript 对 CSS3 animation 动画的流程的简单控制
CSS3的animation是一个好东西,能让页面动画更加纯净流畅,但是之前一扯到动画流程的控制(比如执行完第一个动画后再执行第二个动画在执行某个动作)就有点懵逼如果是jQuery动画呢,有回调函数 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
animation动画效果 1002 css3
animation动画效果 1002 css3 什么是动画使用步骤如何定义动画 @keyframes 动画名称{from{属性:值}percentage{属性:值}to{属性:值} } 或者 @k ...

CSS3 -webkit-animation(动画)

CSS3 -webkit-animation(动画)相关推荐

最新文章

热门文章