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. curl命令上传下载文件

    下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos.org 通过-o/-O选项保存下载的文件到指定的文件中: -o:将文件保存为命令行中指定的文件 ...

  2. sap server笔记

    system 就是sap hana database,如果一个system有多个instance,则必须分散到不同的host中,每个system有唯一的sid. hello各位,jackie建议我们去 ...

  3. 2016级算法第一次练习赛-B.朴素的中位数

    朴素的中位数 题目链接:https://buaacoding.cn/problem/846/index 分析 题意很简单,就是给定了两个从小到大排好序的数组,找出这两个数组合起来的数据中的中位数. 方 ...

  4. editplus5注册码

    注册码:Vovan 3AG46-JJ48E-CEACC-8E6EW-ECUAW

  5. 自定义View实现钟摆效果进度条PendulumView

    转载请注明出处:http://blog.csdn.net/fightlei/article/details/52556755 在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果. ...

  6. [转] Jenkins pipeline 中获取 exit code, stdout and stderr 返回值和输出

    [From] https://issues.jenkins-ci.org/browse/JENKINS-44930 其做法是,把stdout定向到一个文件,sh 配置 returnStatus: tr ...

  7. SpringBoot内嵌Tomcat开启APR模式(运行环境为Centos7)

    网上查到的一些springboot内嵌的tomcat开启apr的文章,好像使用的springboot版本较老,在SpringBoot 2.0.4.RELEASE中已经行不通了.自己整理了一下,供参考. ...

  8. 3dsmax2016卸载/安装失败/如何彻底卸载清除干净3dsmax2016注册表和文件的方法

    3dsmax2016提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2016失败提示3dsmax2016安装未完成,某些产品无法安装,也有时候想重新 ...

  9. Oracle Schema

    1.这是Schema的definition: A schema is a collection of database objects (used by a user.) Schema objects ...

  10. ASP.NET MVC 域名泛解析设置

    最近有个需求要做一个动态二级域名的网站,我们可以通过这样的方式去访问我们的网站 http://用户名.blog.com.而这里的用户名是根据程序的需要动态生成的.这里就会涉及到DNS服务器,要做相应的 ...