码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-08-16 00:47:55      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:调用   alternate   蓝色   gradient   逆向   animation   了解   image   应该   

一、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中的过渡效果和动画效果

标签:调用   alternate   蓝色   gradient   逆向   animation   了解   image   应该   

原文地址:https://www.cnblogs.com/nyw1983/p/11361089.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!