<!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.path路径模块中的操作方法总结

    #os.path模块主要集成了针对路径文件夹的操作功能,这里我们就来看一下Python中的os.path路径模块中的操作方法总结,需要的朋友可以参考下 解析路径路径解析依赖与os中定义的一些变量: o ...

  2. 小工具：word表格文字转化成insert语句

    群里的一个朋友有个需要,要让把word里的表格数据插入到数据库里面. 我的思路是,把格式化的数据转成insert语句,然后去执行就可以了. 要求的insert语句格式是:'insert into xx ...

  3. MySQL命令行导出、导入数据库，备份数据库表

    MySQL导出数据库/数据表 1.首先,将你MySQL安装目录,例如C:\Program Files\MySQL\MySQL Server 5.7\bin添加到你的系统环境变量PATH中: 2.导出数 ...

  4. hdu 6180 Schedule

    Schedule Problem Description There are N schedules, the i-th schedule has start time si and end time ...

  5. jquery 封装插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  6. VisualStudio使用技巧及快捷键

    1. 怎样调整代码排版的格式? 选择:编辑—>高级—>设置文档的格式或编辑—>高级—>设置选中代码的格式. 格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+ ...

  7. C++：delete不完整类型的指针

    简单版 以下代码编译时会有warning: class X; void foo(X* x) { delete x; } 在GCC4.1.2下,编译出错信息是: warning: possible pr ...

  8. python tar 压缩解压

    压缩: 1. import tarfile import os def tar(fname): t = tarfile.open(fname + ".tar.gz", " ...

  9. Ubuntu14.04 获取文件或者文件夹大小

    [root@bogon ~]# stat -c%s install.log

  10. python 正则表达式替换字符串中匹配的字符

    import re street = '21 Ramkrishna Road' print(re.sub('Road$', 'Rd.', street)) 将结尾的Road用Rd.替换