css3中的过渡效果和动画效果

Posted nyw1983

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3中的过渡效果和动画效果相关的知识,希望对你有一定的参考价值。

一、CSS3 过渡

(一)、CSS3过渡简介

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

 

实现过渡效果的两个要件:

 

  • 规定把效果添加到哪个 CSS 属性上
  • 规定效果的时长

定义动画的规则

过渡transition  (作用) 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

(二)、transition属性

   语法 :   transition: 属性名 持续时间 过渡方法

  • transition-property     属性的名字(如果是一个属性就带有这个属性的名字;如果是多个属性,属性名之间用逗号隔开;如果是所有属性,用all表示即可。)表示对哪个属性进行变化。
  • transition-duration     变化持续的时间长度(秒或是毫秒)
  • transition-timing-function   过渡实现的方式(比如说,先慢后快/先快后慢),具体实现的时候是以函数来实现的。
  • transition-delay    过渡开始前等待的时间,单位为秒或是毫秒。

transition-timing-function  属性取值

  • linear    匀速(线型过渡)
  • ease      先慢后快再慢
  • ease-in  先慢后快
  • ease-out 先快后慢
  • ease-in-out  开头慢结尾慢,中间快

 


实例

原有的状态是灰底红字,鼠标悬停在上面利用transition属性设置了一个3s 之内的变化,背景为由红到蓝的渐变色,文字颜色也逐渐变成白色。

1、首先定义div标签的原始状态,

2、再设置当鼠标悬停在上面的状态。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡</title>
 6     <style>
 7     div
 8         height: 100px;
 9         width:300px;
10         line-height:30px;
11         border-radius:5px;
12         align-content:center;
13         color:red;
14         background-color: #999;
15         transition:all 1s linear;
16     
17     div:hover
18         color:white;
19         /*background-color: #007;*/
20         background:linear-gradient(to bottom,#f0f,#00f)
21     
22     </style>
23 </head>
24 <body>
25     <div align="center" style="font-size:30px">transition</div>
26 </body>
27 </html>

表现效果:(因为过渡是一个动态的效果,所以下面仅展示初始状态、中间、过渡后的效果)

初始技术图片

 

中间技术图片

最后技术图片

 

 

 


 

二、CSS3动画

(一)、CSS3中的动画实现的是什么效果

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。

用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。

实现动画效果两要件:

  • 1、首先要定义一个动画  ,定义一个@keyframes  规则(关键帧)
  • 2、调用动画    动画定义好之后,使用animation 属性调用动画

了解动画的形成原理:

是根据人的“视觉暂留”现象,将一组静止的图形连续出现后,便形成了动画。Flash动画就是基于此原理来制成动画的,时间轴上的每一帧在编辑区中有不同的图形,当时间轴上的帧以当前帧频向前移动时,我们看到的是编辑区中的一组图形不断变化,从而产生了运动的视觉效果

(二)、animation属性设置动画效果

animation属性取值

  • @keyframes                          规定动画
  • animation                               所有动画属性的简写属性,除了animation-play-state属性
  • animation-name                    规定@keyframes 动画名称
  • animation-duration                规定一个动画完成的周期所花费的秒或毫秒。默认值为0,
  • animation-timing-function     规定动画的速度曲线。默认值为ease
  • animation-delay                   动画开始前等待的时间。取值可为负(-2s 动画跳过 2 秒进入动画周期)属性不兼容 IE 9以及更早版本的浏览器.
  • animation-iteration-count      规定动画播放的次数。默认值为1
  • animation-driection               规定动画是否在下一周期逆向地播放。默认值是normal
  • animation-play-state             规定动画是否正在运行或暂停。默认值是running
  • animation-fill-mode               规定对象动画时间之外的状态

 

animation-timing-function  属性取值

 

  • linear    匀速(线型过渡)
  • ease      先慢后快再慢
  • ease-in  先慢后快
  • ease-out 先快后慢
  • ease-in-out  开头慢结尾慢,中间快

 


实例:

用动画animation属性实现在位置变化的同时颜色也发生相应的变化。

颜色:红色黄色蓝色绿色红色

位置:距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px(回到原地)

animation属性:@keyframes(关键帧) 动画名称为mycolor;一个动画周期为5s;动画运动先慢后快再慢ease;动画开始前等待2s;无限(infinite)循环播放;动画正在运行(runing)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动画</title>
 6     <style>
 7     div
 8         width:400px;
 9         height:400px;
10         background:red;
11         position:relative;
12         animation-name:mycolor;
13         /*animation-name规定@keyframes 动画名称*/ 
14         animation-duration:5s;
15         /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/
16         animation-timing-function:ease;
17         /*animation-timing-function规定动画的速度曲线*/
18         animation-delay:2s;
19         /*animation-delay规定动画何时开始。默认值为0*/
20         animation-iteration-count:infinite;
21         /*animation-iteration-count规定动画播放的次数*/
22         animation-direction:alternate;
23         /*animation-driection规定动画是否在下一周期逆向地播放*/
24         animation-play-state:running;
25         /*animation-play-state规定动画是否正在运行或暂停*/
26     
27            @keyframes mycolor
28           
29                0%   background:red;left:0px; top:0px; 
30                25%  background:yellow; left:200px; top:0px;
31                50%  background:blue;left:200px; top:200px
32                75%  background:green;left:0px; top:200px;
33               100% background:red;left:0px; top:0px;
34 
35     </style>
36 </head>
37 <body>
38     <div></div>
39 </body>
40 </html>

除了可以这样每个属性单独设置,也可以使用animation 的简写属性:

1 div
2         width:400px;
3         height:400px;
4         background:red;
5         position:relative;
6         animation:mycolor 5s linear 2s infinite alternate;
7     

 

以上是关于css3中的过渡效果和动画效果的主要内容,如果未能解决你的问题,请参考以下文章

css3过渡和动画的区别详解

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

CSS3——过渡与动画(实现炫酷下拉)

css3 过渡和动画

CSS3动画2D3D转换

css3过渡动画 transition