一、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、再设置当鼠标悬停在上面的状态。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>过渡</title>

     <style>

     div{

         height: 100px;

         width:300px;

         line-height:30px;

         border-radius:5px;

         align-content:center;

         color:red;

         background-color: #999;

         transition:all 1s linear;

     }

     div:hover{

         color:white;

         /*background-color: #007;*/

         background:linear-gradient(to bottom,#f0f,#00f)

     }

     </style>

 </head>

 <body>

     <div align="center" style="font-size:30px">transition</div>

 </body>

 </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-direction               规定动画是否在下一周期逆向地播放。默认值是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)。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>动画</title>

     <style>

     div{

         width:400px;

         height:400px;

         background:red;

         position:relative;

         animation-name:mycolor;

         /*animation-name规定@keyframes 动画名称*/

         animation-duration:5s;

         /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/

         animation-timing-function:ease;

         /*animation-timing-function规定动画的速度曲线*/

         animation-delay:2s;

         /*animation-delay规定动画何时开始。默认值为0*/

         animation-iteration-count:infinite;

         /*animation-iteration-count规定动画播放的次数*/

         animation-direction:alternate;

         /*animation-driection规定动画是否在下一周期逆向地播放*/

         animation-play-state:running;

         /*animation-play-state规定动画是否正在运行或暂停*/

     }

            @keyframes mycolor

           {

                0%   {background:red;left:0px; top:0px; }

                25%  {background:yellow; left:200px; top:0px;}

                50%  {background:blue;left:200px; top:200px}

                75%  {background:green;left:0px; top:200px;}

               100% {background:red;left:0px; top:0px;}

 }

     </style>

 </head>

 <body>

     <div></div>

 </body>

 </html>

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

 div{

         width:400px;

         height:400px;

         background:red;

         position:relative;

         animation:mycolor 5s linear 2s infinite alternate;

     }

css3中的过渡效果和动画效果的更多相关文章

  1. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  2. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  3. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  4. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  5. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  6. 第8章 CSS3中的变形与动画（上）

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  7. CSS3中的变形与动画（二）

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  8. CSS3中的过渡、动画和变换

    一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...

  9. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

随机推荐

  1. linux中从一台机器复制文件或目录到另一台机器上linux机器上

    本机IP:x.x.x.1需要拷贝的机器IP:x.x.x.2用户名:ssh_user 目的:将本机中source_path路径下的文件或目录拷贝到另一台机器的destination_path/路径下 复 ...

  2. 【MM系列】SAP MM模块-BAPI：BAPI_GOODSMVT_CREATE的CODE分析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-BAPI:BAPI ...

  3. Web高效管理多个项目的SVN仓库

    转至:https://www.jianshu.com/p/a0af00642585 采用方案 Linux+Apache+Subversion+MySQL+JDK+Tomcat+Svnadmin 目录 ...

  4. python每日一练：0007题

    第 0007 题: 有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列出来. # -*- coding:utf-8 -*- import os def count ...

  5. CentOS7.查看进程占用端口情况

    1.命令:"netstat -lntp" 2.没有改命令的话,需要安装 net-tools工具:"yum install net-tools" 3. 4. 5.

  6. C盘无损扩容（傻逼拯救者128G固态分两个盘）

    下载DiskGenius.exe 进行拆分分区(我从d盘拆分出20G给c盘) 然后右键此电脑,管理->磁盘管理 选中刚分出来的20G空间指向到c盘

  7. 深入理解java：1.1.1. 反射机制

    反射 到底什么是反射(Reflection)呢? 反射有时候也被称为内省(Introspection),事实上,反射,就是一种内省的方式, Java不允许在运行时改变程序结构或类型变量的结构,但它允许 ...

  8. Flask框架 （四）—— 请求上下文源码分析、g对象、第三方插件（flask_session、flask_script、wtforms）、信号

    Flask框架 (四)—— 请求上下文源码分析.g对象.第三方插件(flask_session.flask_script.wtforms).信号 目录 请求上下文源码分析.g对象.第三方插件(flas ...

  9. js函数的定义和调用

    函数的定义 函数使用function 声明,后跟一组参数以及函数体,语法如下: function functionName([age0,age1,......argn]){ statements } ...

  10. docker--搭建docker swarm集群

    10 搭建docker swarm集群 10.1 swarm 介绍 Swarm这个项目名称特别贴切.在Wiki的解释中,Swarm behavior是指动物的群集行 为.比如我们常见的蜂群,鱼群,秋天 ...