<!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. 03：requests与BeautifulSoup结合爬取网页数据应用

    1.1 爬虫相关模块命令回顾 1.requests模块 1. pip install requests 2. response = requests.get('http://www.baidu.com ...

  2. 20145324王嘉澜《网络对抗技术》Web基础

    实践要求 ①Web前端HTML: 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML ②Web前端javascipt: 理解JavaScript ...

  3. [BZOJ4244]邮戳拉力赛

    Description IOI铁路是由N+2个站点构成的直线线路.这条线路的车站从某一端的车站开始顺次标号为0...N+1. 这条路线上行驶的电车分为上行电车和下行电车两种,上行电车沿编号增大方向行驶 ...

  4. 【安装防火墙】没有iptables时的解决办法

    一.检查iptables服务状态 首先检查iptables服务的状态 [root@woxplife ~]# service iptables status iptables: Firewall is ...

  5. xshell5 Linux 上传下载文件

    1,先登录身份验证和文件传输ZMODEM 选择自动激活. 2,rpm -qa | grep lrzsz 利用此命令查看是否安装了lrzsz . 如果没有任何反应则是没有安装 若没有安装 yum ins ...

  6. Visual Studio 项目模板制作(三)

    前面,我们已经制作好了模板,然后放到相应的Template目录就可以在Visual Studio中使用 本篇,我们采用安装VSIX扩展的方式来安装模板,这种方式需要安装Visual Studio SD ...

  7. Pyinstaller 中 pandas出错问题的解决（详细）

    环境配置 pip install pyinstaller pyinstaller中的参数 -F 表示生成单个可执行文件 -c 显示命令行窗口,一般一开始的时候使用,如果没有错误,那就使用-w命令 -w ...

  8. jerichotab 初始化页面显示tab页中的第一个

    tab初始化默认显示第一个内容,但是tab标签显示最后一个. 源代码: $.fn.initJerichoTab({ renderTo: '#consumable', uniqueId: 'jerich ...

  9. 机器学习-数据可视化神器matplotlib学习之路（三）

    之前学习了一些通用的画图方法和技巧,这次就学一下其它各种不同类型的图.好了先从散点图开始,上代码: from matplotlib import pyplot as plt import numpy ...

  10. ros python 重置位置

    #!/usr/bin/env python import rospy import math import sys import commands import yaml from tf import ...