<!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. 20145307陈俊达《网络对抗》Exp5 MSF基础应用

    20145307陈俊达<网络对抗>Exp5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode? exploit就相当于是载具,各式各样的漏洞在 ...

  2. 扩充巴科斯范式(ABNF)

    BNF:巴科斯范式ABNF(Augmented Backus-Naur Form):扩充巴科斯范式 ABNF是由第68号互联网标准(”STD 68″,大小写样式按照原文)定义的,也就是 RFC 523 ...

  3. 使用fragment添加底部导航栏

    切记:fragment一定要放在framlayout中,不然不会被替换完全(就是切换之后原来的fagment可能还会存在) main.xml <LinearLayout xmlns:androi ...

  4. MAC BOOK Air 安装metasploit-framework

    Step 1:Xcode命令行开发工具OS X确保它已经安装了Xcode开发工具,在终端执行: xcode-select --install1Step 2:Java SDK安装Java sdk,不能用 ...

  5. linux下保存下位机输出的串口信息为文件

    linux下保存下位机输出的串口信息为文件 1.stty -F /dev/ttyUSB0 raw (转换成raw模式) 2.stty -F /dev/ttyUSB0 speed 115200 (设置波 ...

  6. HDU 2157（矩阵快速幂）题解

    How many ways?? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  7. 【源码编译】spark源码编译

    本文采用cdh版本spark-1.6.0-cdh5.12.0 1.源码包下载 2.进入根目录编译,编译的方式有2种 maven mvn clean package \ -DskipTests -Pha ...

  8. Java 创建多线程的三种方法

    1. 继承Thread类2. 实现Runnable接口3. 匿名类的方式 注: 启动线程是start()方法,run()并不能启动一个新的线程

  9. Codeforces Round #527 (Div. 3)

    一场div3... 由于不计rating,所以打的比较浪,zhy直接开了个小号来掉分,于是他AK做出来了许多神仙题,但是在每一个程序里都是这么写的: 但是..sbzhy每题交了两次,第一遍都是对的,结 ...

  10. Future Works on P4

    Future Works on P4 P4 and NV: MPvisor, Hyper4, HyperV, Flex4 P4 and NFV P4 and Network Cache P4 and ...