css3过渡

transition

兼容性：IE10+

transition: none | all | property

默认为none

all 表示所有属性过渡

property 指定属性值，如color   opacity

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7.     body{
  8.         margin:0 auto;
  9.         background:#abcdef;
  10.     }
  11.     .box{
  12.         width:700px;
  13.         height:700px;
  14.         margin:0 auto;
  15.         background:url(source/pic.png) center no-repeat;
  16.         cursor: pointer;
  17.         -webkit-transform:rotate(0deg);
  18.            -moz-transform:rotate(0deg);
  19.             -ms-transform:rotate(0deg);
  20.              -o-transform:rotate(0deg);
  21.                 transform:rotate(0deg);
  22.         -webkit-transition-property:transform;
  23.            -moz-transition-property:transform;
  24.             -ms-transition-property:transform;
  25.              -o-transition-property:transform;
  26.                 transition-property:transform;
  27.     }
  28.     .box:hover{
  29.         -webkit-transform:rotate(180deg);
  30.            -moz-transform:rotate(180deg);
  31.             -ms-transform:rotate(180deg);
  32.              -o-transform:rotate(180deg);
  33.                 transform:rotate(180deg);
  34.     }
  35. </style>
  36. </head>
  37. <body>
  38.     <div class="box"></div>
  39. </body>
  40. </html>

transition-duration 动画持续时间

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7.     body{
  8.         margin:0 auto;
  9.         background:#abcdef;
  10.     }
  11.     .box{
  12.         width:700px;
  13.         height:700px;
  14.         margin:0 auto;
  15.         background:url(source/pic.png) center no-repeat;
  16.         cursor: pointer;
  17.         -webkit-transform:rotate(0deg);
  18.            -moz-transform:rotate(0deg);
  19.             -ms-transform:rotate(0deg);
  20.              -o-transform:rotate(0deg);
  21.                 transform:rotate(0deg);
  22.         -webkit-transition-property:transform;
  23.            -moz-transition-property:transform;
  24.             -ms-transition-property:transform;
  25.              -o-transition-property:transform;
  26.                 transition-property:transform;
  27.         -webkit-transition-duration:2s;
  28.            -moz-transition-duration:2s;
  29.             -ms-transition-duration:2s;
  30.              -o-transition-duration:2s;
  31.                 transition-duration:2s;
  32.         -webkit-transition-timing-function:linear;/*线性*/
  33.            -moz-transition-timing-function:linear;
  34.             -ms-transition-timing-function:linear;
  35.              -o-transition-timing-function:linear;
  36.                 transition-timing-function:linear;
  37.         -webkit-transition-timing-function:ease;/*平滑*/
  38.            -moz-transition-timing-function:ease;
  39.             -ms-transition-timing-function:ease;
  40.              -o-transition-timing-function:ease;
  41.                 transition-timing-function:ease;
  42.         -webkit-transition-timing-function:ease-in;/*缓入*/
  43.            -moz-transition-timing-function:ease-in;
  44.             -ms-transition-timing-function:ease-in;
  45.              -o-transition-timing-function:ease-in;
  46.                 transition-timing-function:ease-in;
  47.         -webkit-transition-timing-function:ease-out;/*缓出*/
  48.            -moz-transition-timing-function:ease-out;
  49.             -ms-transition-timing-function:ease-out;
  50.              -o-transition-timing-function:ease-out;
  51.                 transition-timing-function:ease-out;
  52.         -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
  53.            -moz-transition-timing-function:ease-in-out;
  54.             -ms-transition-timing-function:ease-in-out;
  55.              -o-transition-timing-function:ease-in-out;
  56.                 transition-timing-function:ease-in-out;
  57.     }
  58.     .box:hover{
  59.         -webkit-transform:rotate(180deg);
  60.            -moz-transform:rotate(180deg);
  61.             -ms-transform:rotate(180deg);
  62.              -o-transform:rotate(180deg);
  63.                 transform:rotate(180deg);
  64.     }
  65. </style>
  66. </head>
  67. <body>
  68.     <div class="box"></div>
  69. </body>
  70. </html>

transition-delay 过渡延迟

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7.     body{
  8.         margin:0 auto;
  9.         background:#abcdef;
  10.     }
  11.     .box{
  12.         width:700px;
  13.         height:700px;
  14.         margin:0 auto;
  15.         background:url(source/pic.png) center no-repeat;
  16.         cursor: pointer;
  17.         -webkit-transform:rotate(0deg);
  18.            -moz-transform:rotate(0deg);
  19.             -ms-transform:rotate(0deg);
  20.              -o-transform:rotate(0deg);
  21.                 transform:rotate(0deg);
  22.         -webkit-transition-property:transform;
  23.            -moz-transition-property:transform;
  24.             -ms-transition-property:transform;
  25.              -o-transition-property:transform;
  26.                 transition-property:transform;
  27.         -webkit-transition-duration:2s;
  28.            -moz-transition-duration:2s;
  29.             -ms-transition-duration:2s;
  30.              -o-transition-duration:2s;
  31.                 transition-duration:2s;
  32.         -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
  33.            -moz-transition-timing-function:ease-in-out;
  34.             -ms-transition-timing-function:ease-in-out;
  35.              -o-transition-timing-function:ease-in-out;
  36.                 transition-timing-function:ease-in-out;
  37.         -webkit-transition-delay:1s;
  38.            -moz-transition-delay:1s;
  39.             -ms-transition-delay:1s;
  40.              -o-transition-delay:1s;
  41.                 transition-delay:1s;
  42.     }
  43.     .box:hover{
  44.         -webkit-transform:rotate(180deg);
  45.            -moz-transform:rotate(180deg);
  46.             -ms-transform:rotate(180deg);
  47.              -o-transform:rotate(180deg);
  48.                 transform:rotate(180deg);
  49.     }
  50. </style>
  51. </head>
  52. <body>
  53.     <div class="box"></div>
  54. </body>
  55. </html>

transtion简写

transition: property  duration  timing-function  delay

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7.     body{
  8.         margin:0 auto;
  9.         background:#abcdef;
  10.     }
  11.     .box{
  12.         width:700px;
  13.         height:700px;
  14.         margin:0 auto;
  15.         background:url(source/pic.png) center no-repeat;
  16.         cursor: pointer;
  17.         -webkit-transform:rotate(0deg);
  18.            -moz-transform:rotate(0deg);
  19.             -ms-transform:rotate(0deg);
  20.              -o-transform:rotate(0deg);
  21.                 transform:rotate(0deg);
  22.         -webkit-transition:transform 2s ease-in-out 1s;
  23.            -moz-transition:transform 2s ease-in-out 1s;
  24.             -ms-transition:transform 2s ease-in-out 1s;
  25.              -o-transition:transform 2s ease-in-out 1s;
  26.                 transition:transform 2s ease-in-out 1s;
  27.     }
  28.     .box:hover{
  29.         -webkit-transform:rotate(180deg);
  30.            -moz-transform:rotate(180deg);
  31.             -ms-transform:rotate(180deg);
  32.              -o-transform:rotate(180deg);
  33.                 transform:rotate(180deg);
  34.         -webkit-transition:transform 2s ease-in-out 1s;
  35.            -moz-transition:transform 2s ease-in-out 1s;
  36.             -ms-transition:transform 2s ease-in-out 1s;
  37.              -o-transition:transform 2s ease-in-out 1s;
  38.                 transition:transform 2s ease-in-out 1s;
  39.     }
  40. </style>
  41. </head>
  42. <body>
  43.     <div class="box"></div>
  44. </body>
  45. </html>

通过CSS3属性值的变化实现动画效果+触发这些动画产生交互的更多相关文章

  1. js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...

  2. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  3. Android 动画效果 及 自定义动画

    1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...

  4. Java 给PPT添加动画效果（预设动画/自定义动画）

    PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...

  5. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

  6. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  7. 根据Expander的IsExpanded属性值的变化动态设计Control的size

    简要说明: 当Expander 的IsExpanded属性为“True” 时给控件设个尺寸(此处为高度),当为“False”时给控件设另外一个值. 知识点:数据绑定.Style和Trigger < ...

  8. CSS3属性值之box-shadow

    语法:   box-shadow:inset x-offset y-offset blur-radius spread-radius color 也就是:   对象选择器 {box-shadow:投影 ...

  9. Vue中如何监控某个属性值的变化？

    比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...

随机推荐

  1. Java：多线程概述与创建方式

    目录 Java:多线程概述与创建方式 进程和线程 并发与并行 多线程的优势 线程的创建和启动 继承Thread类 start()和run() 实现Runnable接口 实现Callable接口 创建方 ...

  2. Ubuntu解决 MariaDB无密码就可以登录的问题

    使用apt-get来安装mysql,安装好之后发现安装的是 MariaDB,如下,无需密码既可以登录了.即使使用mysqladmin或mysql_secure_installation 设置好密码,用 ...

  3. 函数调用方式--__thiscall调用方式和__cdecl,__stdcall有什么区别

    函数调用方式--__thiscall调用方式和__cdecl,__stdcall有什么区别 首先,__thiscall是关于类的一种调用方式,它与其他调用方式的最大区别是:    __thiscall ...

  4. Grevl旅游注册的初步界面，以源代码和运行图片展示

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

  5. 斐波那契数列（php实现）

    描述 斐波那契数列指的是这样一个数列:1.1.2.3.5.8.13.21.34... 规则 : 有N个数,第i个数的值 N(i)= N(i-1) + N(i-2) 需求: 给出下标i ,求第i 的个数 ...

  6. Codeforces_844

    A.统计字母个数. #include<bits/stdc++.h> using namespace std; string s; int n; map<char,int> mp ...

  7. （二）Mybatis动态sql

    首先动态sql简单来讲就是可以根据传入参数的不同来动态的生成sql语句,拼接where语句,这样你就不用写很多个sql语句了,并且它里面有一些特性也可以帮助你避免sql语句的拼接错误,主要分为4个: ...

  8. 利用idea对tomcat容器进行debug

    通过idea对tomcat容器进行debug有两种方式: 一种直接修改idea中引用tomcat的启动配置 另一种是修改tomcat的启动脚本再通过设置diea的远程debug的方式进行调试 1.设置 ...

  9. MongoDB、Redis和Memcached介绍

    MongoDB MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  10. .Net Core中IOC容器的使用

    打代码之前先说一下几个概念,那就是什么是IOC.DI.DIP 虽然网上讲这些的已经有很多了,我这里还是要再赘述一下 IOC容器就是一个工厂,负责创建对象的 IOC控制反转:只是把上端对下端的依赖,换成 ...