<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animation同时改变多个属性的变化</title>
    <style>
        div {
        width:150px;
        height:150px;
        background:#4cff00;
        border:3px solid #000000;
        position:absolute;
        left:200px;
        top:300px;
        }
        /*定义一个关键帧*/
        @-webkit-keyframes 'xiaolei' {
                0%
            {
                -webkit-transform:rotate(0deg) scale(1);
                background-color:#4cff00;
            }
                40% {
                -webkit-transform:rotate(720deg) scale(1.5);
                background-color:#f00;
                }
        70% {
         -webkit-transform:rotate(1080deg) scale(2.5);
                background-color:#ffd800;
        }
            100% {
                -webkit-transform:rotate(0deg) scale(1);
                background-color:#4cff00;
            }
        }
        div:hover {
        -webkit-animation-name:'xiaolei';
        -webkit-animation-duration:8s;
        -webkit-animation-interation-count:1;
        }
    </style>
</head>
<body>
    <div>鼠标悬停，开始动画</div>
</body>
</html>

Animation同时改变多个属性的动画的更多相关文章

  1. css3中变形函数（同样是对元素来说的）和元素通过改变自身属性达到动画效果

    /*对元素进行改变(移动.变形.伸缩.扭曲)*/ .wrapper{ margin:100px 100px auto auto; width:300px; height:200px; border:2 ...

  2. 自定义 Layer 属性的动画

    默认情况下,CALayer 及其子类的绝大部分标准属性都可以执行动画,无论是添加一个 CAAnimation 到 Layer(显式动画),亦或是为属性指定一个动作然后修改它(隐式动画).   但有时候 ...

  3. 【UWP】对 Thickness 类型属性进行动画

    好几个月没写 blog 了,一个是在忙新版的碧影壁纸,另一方面是等(观望)周年更新的 api(不过现在还是比较失望,仍然没法支持矩形以外的 Clip).闲话少说,进入主题. 在 UWP 中,出于性能考 ...

  4. CSS属性组-动画、转换、渐变

    一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...

  5. WPF编程，通过Double Animation动态更改控件属性的一种方法。

    原文:WPF编程,通过Double Animation动态更改控件属性的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/a ...

  6. 容易忘记的css属性和动画属性

    动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...

  7. WPF中属性经动画处理后无法更改的问题

    在WPF的Animation中,有一个属性为FillBehavior,用于指定时间线在其活动周期结束后但其父时间线仍处于活动周期或填充周期时的行为方式.如果希望动画在活动周期结束时保留其值,则将动画F ...

  8. Silverlight代码编写对控件的PlaneProjection.RotationY属性控制动画

    Canvas c; void btnDraw_Click(object sender, RoutedEventArgs e) { Storyboard story = new Storyboard() ...

  9. Html 改变原有标签属性

    内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...

随机推荐

  1. Python入门之os.walk()方法

    os.walk方法,主要用来遍历一个目录内各个子目录和子文件. os.walk(top, topdown=True, onerror=None, followlinks=False) 可以得到一个三元 ...

  2. phpstorm常用快捷键（自备不全）

    CTRL+N 查找类 CTRL+SHIFT+N 全局搜索文件 ,优先文件名匹配的文件 CTRL+SHIFT+ALT+N 查找php类名/变量名 ,js方法名/变量名, css 选择器 CTRL+G 定 ...

  3. HTTP If-Modified-Since引发的浏览器缓存汇总

    在看Spring中HttpServlet的Service方法时,对于GET请求,代码逻辑如下: if (method.equals(METHOD_GET)) { long lastModified = ...

  4. Tomcat下使用Log4j，按日期每天存放，解决catalina.out日志文件过大问题

    1. 准备jar包: log4j-1.2.17.jar (从 http://www.apache.org/dist/logging/log4j/1.2.17/ 下载) tomcat-juli.jar, ...

  5. fatal One or more refs for names blocks change upload

    前言 今天在提代码时,发现push不到gerrit仓库了,十分的奇怪,和同事沟通后发现,同事可以直接git push origin master而且也可以合并,都是没有问题的,但是就是在gerrit上 ...

  6. linux下安装微信小程序开发工具

    一.环境:: ubuntu 16.04 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版nwjs-s ...

  7. win10 系统变量迁移

    经常要重装电脑,自己的很多配置都要重新手动配置,其中就包括系统变量 系统变量在注册表中存在 win+R regedit HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\ ...

  8. .Net Core集成Office Web Apps（一）

    最近开始学习.Net Core,并使用Visual Studio Code工具来开发.感觉开发起来特别的方便,但是有个头疼的地方:许多的类库被修改了,一时半会儿还熟悉不了,需要查阅官方API... M ...

  9. 【TCP/IP详解 卷一：协议】第十二章 广播与多播 ping实验

    我手机连接到wifi上所分配到的IP地址:192.168.1.116 子网掩码:255.255.255.0 路由器:192.168.1.1 ping 192.168.1.116 (ping 一台主机的 ...

  10. POJ 3624 Charm Bracelet（0-1背包模板）

    http://poj.org/problem?id=3624 题意:给出物品的重量和价值,在重量一定的情况下价值尽可能的大. 思路:经典0-1背包.直接套用模板. #include<iostre ...