css3动画的初识

  引言:作为一个前端工作者在当下前端技术不断更新迭代的时刻有些知识的掌握的必要性,已经不言而喻了。css3动画应该算是其中比较重要切吸引人的知识,用他我们可以解放繁琐的js代码,还可以使咱们的网页也同样的酷炫灵动。今天我们就来初步认识一下CSS Animation吧!

  认识:动画的一切全在于时间点和空间幅度的协调变化——银灵子

  1.基本用法

  首先,CSS Animation需要指定动画一个周期持续的时间,以及动画效果的名称。

  div:hover { animation: 1s rainbow; }

  上面代码表示,当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。为此,我们还需要用keyframes关键字,定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}上面代码表示,rainbow效果一共有三个状态,分别为起始(0%)、中点(50%)和结束(100%)。如果有需要,完全可以插入更多状态。

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。

div:hover {
  animation: 1s rainbow infinite;
}也可以指定动画具体播放的次数,比如3次。
div:hover {
  animation: 1s rainbow 3;
}

 2.animation-fill-mode

  动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用animation-fill-mode属性。

div:hover {
  animation: 1s rainbow forwards;
}animation-fill-mode还可以使用下列值。

animation-fill-mode还可以使用下列值。

(1)none:默认值,回到动画没开始时的状态。

(2)backwards:让动画回到第一帧的状态。

(3)both: 根据animation-direction(见后)轮流应用forwards和backwards规则。

3.animation-direction

  动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。

下面看一个例子,来说明如何使用animation-direction。假定有一个动画是这样定义的。


@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

默认情况是,animation-direction等于normal。


div:hover {
  animation: 1s rainbow 3 normal;
}

此外,还可以等于取alternate、reverse、alternate-reverse等值。

简单说,animation-direction指定了动画播放的方向,最常用的值是normal和reverse。浏览器对其他值的支持情况不佳,应该慎用。

4 .animation的各项属性

同transition一样,animation也是一个简写形式。


div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

这是一个简写形式,可以分解成各个单独的属性。


div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

5 .keyframes的写法

keyframes关键字用来定义动画的各个状态,它的写法相当自由。


@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

0%可以用from代表,100%可以用to代表,因此上面的代码等同于下面的形式。


@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。


@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至,可以把多个状态写在一行。


@keyframes pound {
  from,to { transform: none; }
  50% { transform: scale(1.2); }
}

另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。

div:hover {
  animation: 1s rainbow infinite steps(10);
}

6 animation-play-state

  有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。

如果想让动画保持突然终止时的状态,就要使用animation-play-state属性。


div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

上面的代码指定,没有鼠标没有悬停时,动画状态是暂停;一旦悬停,动画状态改为继续播放。

7 浏览器前缀

目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀。

也就是说,实际运用中,代码必须写成下面的样子。


div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
@-moz-keyframes rainbow {	  0% { background: #c00; }	  50% { background: orange; }	  100% { background: yellowgreen; }	}	@-ms-keyframes rainbow {	  0% { background: #c00; }	  50% { background: orange; }	  100% { background: yellowgreen; }	}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

(就这些了,感谢您的阅读,希望我的分享能给你带来帮助!)


 

 
时间: 2024-10-22 18:48:21

css3动画的初识的相关文章

CSS3学习(CSS3过渡、CSS3动画)

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo

css3动画由浅入深总结

回到顶部 一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果. 浏览器支持 属性 浏览器支持 @keyframes           animation           Internet Explo

CSS3动画:transition和animation(一)

1.浏览器支持情况 transform: transition: animation: 2.分别介绍他们的用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜,即可以改变元素的形状. 语法为transform: none|transform-functions;具体的方法参见 W3CSchool上的CSS3 transform 属性介绍 transition 属性是一个简写属性,用于设置四个过渡属性: transition-propert

CSS3——动画效果

CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~ 简单Demo: html代码: <div id="dv1"></div> CSS3代码: <style type="text/css"> #dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;} @webki

高性能 CSS3 动画

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况. 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方案:CSS