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属性值的变化实现动画效果+触发这些动画产生交互的更多相关文章

  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. 手把手写框架入门（一） | 核心拦截器DispatchFilter实现

    前言 1Filter实现框架拦截 1配置自定义Filter 2创建一个Filter 3创建一个ActionMapping 4创建一个ActionMapper 5创建一个WebExecutor 6创建测 ...

  2. 曹工说Spring Boot源码（13）-- AspectJ的运行时织入（Load-Time-Weaving），基本内容是讲清楚了（附源码）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  3. 带大家用40行python代码实现一个疫情地图

    最近两个月,因为新冠病毒无情的肆虐,相信会给每个中国人的记忆中画上重重的一笔.到今天为止,疫情形势依然十分严峻,虽然除湖北外的其他省份已经连续十一天确诊人数下降,但是接下来还有将近至少1.6亿的人口迁 ...

  4. uml图六种箭头的含义

    转:https://blog.csdn.net/wglla/article/details/52225571 在看一些技术博客的时候,经常会见到博客里画上很多uml图.因为经常会被这几种表达关系的箭头 ...

  5. 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. 剩下的可以 ...

  6. num14---享元模式

    案例:

  7. iOS - 一个简单的带标题的图标的实现

    代码不复杂,直接上代码: ImageViewButton.h // // ImageViewButton.h// // 带有图片.底部标题或者顶部的按钮 // // #import <UIKit ...

  8. 编译原理实验之SLR1文法分析

    ---内容开始--- 这是一份编译原理实验报告,分析表是手动造的,可以作为借鉴. 基于  SLR(1) 分析法的语法制导翻译及中间代码生成程序设计原理与实现1 .理论传授语法制导的基本概念,目标代码结 ...

  9. 08-SpringMVC02

    今日知识 1. 文件上传 2. ResponseBody和RequestBody 3. SpringMVC多视图 4. 静态资源的处理 文件上传 1. 导包,(commom.io , commons- ...

  10. javascript json语句 与 js语句的互转

    //var data = "weihexin" //var data = ["weihexin", 1] var data = {name:"weih ...