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

css3过渡

transition

兼容性：IE10+

transition: none | all | property

默认为none

all 表示所有属性过渡

property 指定属性值，如color opacity

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    .box{

        width:700px;

        height:700px;

        margin:0 auto;

        background:url(source/pic.png) center no-repeat;

        cursor: pointer;

        -webkit-transform:rotate(0deg);

           -moz-transform:rotate(0deg);

            -ms-transform:rotate(0deg);

             -o-transform:rotate(0deg);

                transform:rotate(0deg);

        -webkit-transition-property:transform;

           -moz-transition-property:transform;

            -ms-transition-property:transform;

             -o-transition-property:transform;

                transition-property:transform;

    }

    .box:hover{

        -webkit-transform:rotate(180deg);

           -moz-transform:rotate(180deg);

            -ms-transform:rotate(180deg);

             -o-transform:rotate(180deg);

                transform:rotate(180deg);

    }

</style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

transition-duration 动画持续时间

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    .box{

        width:700px;

        height:700px;

        margin:0 auto;

        background:url(source/pic.png) center no-repeat;

        cursor: pointer;

        -webkit-transform:rotate(0deg);

           -moz-transform:rotate(0deg);

            -ms-transform:rotate(0deg);

             -o-transform:rotate(0deg);

                transform:rotate(0deg);

        -webkit-transition-property:transform;

           -moz-transition-property:transform;

            -ms-transition-property:transform;

             -o-transition-property:transform;

                transition-property:transform;

        -webkit-transition-duration:2s;

           -moz-transition-duration:2s;

            -ms-transition-duration:2s;

             -o-transition-duration:2s;

                transition-duration:2s;

        -webkit-transition-timing-function:linear;/*线性*/

           -moz-transition-timing-function:linear;

            -ms-transition-timing-function:linear;

             -o-transition-timing-function:linear;

                transition-timing-function:linear;

        -webkit-transition-timing-function:ease;/*平滑*/

           -moz-transition-timing-function:ease;

            -ms-transition-timing-function:ease;

             -o-transition-timing-function:ease;

                transition-timing-function:ease;

        -webkit-transition-timing-function:ease-in;/*缓入*/

           -moz-transition-timing-function:ease-in;

            -ms-transition-timing-function:ease-in;

             -o-transition-timing-function:ease-in;

                transition-timing-function:ease-in;

        -webkit-transition-timing-function:ease-out;/*缓出*/

           -moz-transition-timing-function:ease-out;

            -ms-transition-timing-function:ease-out;

             -o-transition-timing-function:ease-out;

                transition-timing-function:ease-out;

        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/

           -moz-transition-timing-function:ease-in-out;

            -ms-transition-timing-function:ease-in-out;

             -o-transition-timing-function:ease-in-out;

                transition-timing-function:ease-in-out;

    }

    .box:hover{

        -webkit-transform:rotate(180deg);

           -moz-transform:rotate(180deg);

            -ms-transform:rotate(180deg);

             -o-transform:rotate(180deg);

                transform:rotate(180deg);

    }

</style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

transition-delay 过渡延迟

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    .box{

        width:700px;

        height:700px;

        margin:0 auto;

        background:url(source/pic.png) center no-repeat;

        cursor: pointer;

        -webkit-transform:rotate(0deg);

           -moz-transform:rotate(0deg);

            -ms-transform:rotate(0deg);

             -o-transform:rotate(0deg);

                transform:rotate(0deg);

        -webkit-transition-property:transform;

           -moz-transition-property:transform;

            -ms-transition-property:transform;

             -o-transition-property:transform;

                transition-property:transform;

        -webkit-transition-duration:2s;

           -moz-transition-duration:2s;

            -ms-transition-duration:2s;

             -o-transition-duration:2s;

                transition-duration:2s;

        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/

           -moz-transition-timing-function:ease-in-out;

            -ms-transition-timing-function:ease-in-out;

             -o-transition-timing-function:ease-in-out;

                transition-timing-function:ease-in-out;

        -webkit-transition-delay:1s;

           -moz-transition-delay:1s;

            -ms-transition-delay:1s;

             -o-transition-delay:1s;

                transition-delay:1s;

    }

    .box:hover{

        -webkit-transform:rotate(180deg);

           -moz-transform:rotate(180deg);

            -ms-transform:rotate(180deg);

             -o-transform:rotate(180deg);

                transform:rotate(180deg);

    }

</style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

transtion简写

transition: property duration timing-function delay

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    body{

        margin:0 auto;

        background:#abcdef;

    }

    .box{

        width:700px;

        height:700px;

        margin:0 auto;

        background:url(source/pic.png) center no-repeat;

        cursor: pointer;

        -webkit-transform:rotate(0deg);

           -moz-transform:rotate(0deg);

            -ms-transform:rotate(0deg);

             -o-transform:rotate(0deg);

                transform:rotate(0deg);

        -webkit-transition:transform 2s ease-in-out 1s;

           -moz-transition:transform 2s ease-in-out 1s;

            -ms-transition:transform 2s ease-in-out 1s;

             -o-transition:transform 2s ease-in-out 1s;

                transition:transform 2s ease-in-out 1s;

    }

    .box:hover{

        -webkit-transform:rotate(180deg);

           -moz-transform:rotate(180deg);

            -ms-transform:rotate(180deg);

             -o-transform:rotate(180deg);

                transform:rotate(180deg);

        -webkit-transition:transform 2s ease-in-out 1s;

           -moz-transition:transform 2s ease-in-out 1s;

            -ms-transition:transform 2s ease-in-out 1s;

             -o-transition:transform 2s ease-in-out 1s;

                transition:transform 2s ease-in-out 1s;

    }

</style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

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

js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
Android 动画效果及自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标
1.介绍补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...
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 ...
根据Expander的IsExpanded属性值的变化动态设计Control的size
简要说明: 当Expander 的IsExpanded属性为“True” 时给控件设个尺寸(此处为高度),当为“False”时给控件设另外一个值. 知识点:数据绑定.Style和Trigger < ...
CSS3属性值之box-shadow
语法: box-shadow:inset x-offset y-offset blur-radius spread-radius color 也就是: 对象选择器 {box-shadow:投影 ...
Vue中如何监控某个属性值的变化？
比如现在需要监控data中, obj.a 的变化.Vue中监控对象属性的变化你可以这样: deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改: 还有一种 ...

随机推荐

SpringBoot使用JMS(activeMQ)的两种方式队列消息、订阅/发布
刚好最近同事问我activemq的问题刚接触所以分不清,前段时间刚好项目中有用到,所以稍微整理了一下,仅用于使用 1.下载ActiveMQ 地址:http://activemq.apache.org/ ...
Linux后门的几种姿势
转载自 https://evilanne.github.io/2017/08/26/Linux%E5%90%8E%E9%97%A8-%E6%8C%81%E7%BB%AD%E5%85%B3%E6%B3% ...
copy constructor和copy assignment operator的区别
拷贝构造函数(copy constructor)被用来以一个对象来初始化同类型的另一个对象,拷贝赋值运算符(copy assignment operator)被用来将一个对象中的值拷贝到同类型的另一个 ...
POJ_1221_DP
http://poj.org/problem?id=1221 简单dp,dp[i][j]表示i被划分成首位>=j的方案数. dp[i][i]为1,i为偶数时dp[i][i/2]为2. 剩下的可以 ...
2、HotSpot虚拟机对象探秘
基于使用优先的原则,以常用的虚拟机HotSpot和常用的内存区域Java堆为例,深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全过程. 1.对象的创建划分可用空间在语言层面上,创 ...
Go语言实现：【剑指offer】重建二叉树
该题目来源于牛客网<剑指offer>专题. 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4 ...
Method Resolve Order (MRO) - 类对象属性的解析顺序
Method Resolve Order (MRO) - 类对象属性的解析顺序 Python 支持多重继承, 此时就需要解决按照何种顺序来解析属性的问题.类的继承关系在一个特殊的类属性中指定(__mr ...
centos7 安装 iRedmail 后给nginx添加虚拟主机
iRedmail安装参考官方文档和 https://ywnz.com/linuxyffq/4563.html 准备工作更新操作系统 yum update -y 安装必要组件 yum install ...
[Effective Java 读书笔记] 第7章方法
第39条必要时进行保护性拷贝对于可变类,如果作为参数传入到自己的类里,并作为自己类的数据使用存储时,需要进行保护性拷贝,比如Date是可变的,如果传入一个Date类,最好做一个保护性拷贝,以免在调 ...
golang 自定义结构体(与其他语言对象类似)
/* 结构体变量: 结构体的定义只是一种内存布局的描述,只有当结构体实例化时,才会真正地分配内存, 因此必须在定义结构体并实例化后才能使用结构体的字段. type 类型名 struct { 字段1 字 ...

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

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

随机推荐

热门专题