1.transition功能

transition属性的使用方法：transition:property duration timing-function;

其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。

多平滑过渡示例：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="content-type" content="text/html; charset=utf-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>测试</title>

 </head>

 <body>

 <div id="test"></div>

 <style>

     #test{

         width: 500px;

         height: 500px;

         background-color: yellow;

         /*css动画*/

         transform: rotate(0);

         -webkit-transition: transform 0.5s linear, width 0.5s linear;

         -moz-transition: transform 0.5s linear, width 0.5s linear;

         -ms-transition: transform 0.5s linear, width 0.5s linear;

         -o-transition: transform 0.5s linear, width 0.5s linear;

         transition: transform 0.5s linear, width 0.5s linear;

     }

     #test:hover{

         width: 200px;

         transform: rotate(180deg);

     }

 </style>

 </body>

 </html>

2.animation功能

使用示例：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="content-type" content="text/html; charset=utf-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>测试</title>

 </head>

 <body>

 <div id="test"></div>

 <style>

 /*animation动画*/

     @-webkit-keyframes colorChange {

         0%{

             background-color: deepskyblue;

         }

         50%{

             background-color: red;

         }

         100%{

             background-color: deepskyblue;

         }

     }

     #test{

         width:500px;

         height: 500px;

         background-color: deepskyblue;

     }

     #test:hover{

         animation-name: colorChange;

         animation-duration: 1s;

         animation-timing-function: linear;

     }

 </style>

 </body>

 </html>

实现动画的方法：

方法 属性值的变化速度
linear 在动画开始时与结束时以同样的速度进行变化
ease-in 动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out 动画开始时速度很快，然后速度沿曲线值进行放慢
ease 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

CSS3动画功能的更多相关文章

  1. css3动画功能介绍

    一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性 ...

  2. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  3. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  4. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  5. CSS3动画变形Animations

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. CSS3中的动画功能（二）

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  7. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  9. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

随机推荐

  1. Eclipse中的常见设置

    本文将移到下面的博客维护: 新的博客网址 当新建一个workspace时,习惯做下面的设置: 1. 在eclipse中,默认的Text file encoding是GBK(操作系统是中文简体):如果操 ...

  2. 吴裕雄 python 机器学习——聚类

    import numpy as np import matplotlib.pyplot as plt from sklearn.datasets.samples_generator import ma ...

  3. springboot项目,执行查询方法报错

    org.hibernate.LazyInitializationException: could not initialize proxy [com.myproject.sell.dataobject ...

  4. [转] Java 命令行交互-JCommander

    [From] https://github.com/Sayi/sayi.github.com/issues/32 我喜欢简单,什么是简单?正如若干字符组成的命令行. 有时候我们用Java开发了一个小工 ...

  5. Q806 写字符串需要的行数

    我们要把给定的字符串 S 从左到右写到每一行上,每一行的最大宽度为100个单位,如果我们在写某个字母的时候会使这行超过了100 个单位,那么我们应该把这个字母写到下一行.我们给定了一个数组 width ...

  6. js 下不同浏览器，new Date转换结果时差

    项目中在android上使用XWalkView作为浏览器,发现在解析时间的时候解析结果和实际结果有时差. android联机调试的截图如下: PC本机调试截图如下: 从android联机调试的截图看, ...

  7. 论文阅读 | FoveaBox: Beyond Anchor-based Object Detector

    论文阅读——FoveaBox: Beyond Anchor-based Object Detector 概述 这是一篇ArXiv 2019的文章,作者提出了一种新的anchor-free的目标检测框架 ...

  8. nginx防ddos配置

    Nginx  limit_zone与limit_req_zone (防DDOS攻击模块) http { limit_req_zone $binary_remote_addr zone=one:100m ...

  9. 在Eclipse或工作空间中 ，复制或修改项目后，把项目部署后发现还是原来的项目名称

    1 问题引出 1 在eclipse中直接复制一个项目,修改名称之后,然后部署,部署之后的项目名称还有原来的项目名称 2 在eclipse的工作空间中直接复制一个项目,修改名字之后,发布也会出现同样的问 ...

  10. clearfix的用法

    如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1 ...