<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animation动画</title>
    <style>
        /*keyframe 关键帧名称{
            from|to|百分比{
               属性1:属性值1；
               属性2:属性值2；
               属性3:属性值3；
             }
            }
            上面的语法格式中，from|to|百分比用于定义关键帧的位置，其中from代表开始处；to代表动画结束帧；百分比则指定关键帧的出现位置。例如
            10%代表关键帧出现在动画进行了1/10时间处。一个关键帧定义可以包含多个关键帧。
            CSS3为Animation提供了以下几个属性
            animation-name:指定动画名称。该属性指定一个已有的关键帧定义
            animation-duration:指定动画的持续时间
            animation-timing-function:指定动画的变化速度
            animation-delay:指定动画延迟多长时间才开始执行
            animation-interation-count：指定动画的循环执行次数

*/
        /*定义一个关键帧*/
        @-webkit-keyframes 'aaa'{
       /*定义动画开始处的关键帧*/
       0%
        {
        left:100px;
        }
        /*定义动画进行到40%时的关键帧*/
        40% {
        left:200px;
        }
        /*定义动画进行到60%*/
        60% {
        left:300px;
        }
        /*定义动画进行到100%的关键帧*/
        100% {
        left:100px;
        }
                            }
        /*为div定义CSS样式*/
        div {
        background-color:#dd2038;
        width:100px;
        height:100px;
        border:2px solid #000000;
        position:absolute;
        left:100px;
        }
        /*为鼠标悬停的div元素定义CSS样式*/
            div:hover {
            /*指定执行fkjava动画*/
            -webkit-animation-name:'aaa';
            /*指定动画的持续时间*/
            -webkit-animation-duration:5s;
            /*指定动画的循环次数为*/
            -webkit-animation-interation-count:1;
            }
    </style>
</head>
<body>
    <div>鼠标悬停，开始动画</div>
</body>
</html>

转载于:https://www.cnblogs.com/xiaoleidiv/p/3163514.html

Animation动画相关推荐

  1. 【Android 基础】Animation 动画介绍和实现

    转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...

  2. css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果

    旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...

  3. web 移动端 ios 浏览器中 animation 动画异常

    关键字:animation,ios,移动端,异常 解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...

  4. CSS3 Animation动画的十二原则

    [本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...

  5. python【Matlibplot绘图库】Animation动画（真の能看懂~！）

    文章目录 1 代码 2 效果 3 解释 1 代码 from matplotlib import pyplot as plt from matplotlib import animation impor ...

  6. 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )

    文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...

  7. 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )

    文章目录 ◯.AnimatedWidget 组件引入 一.创建 AnimatedWidget 动画组件 二.创建动画控制器 三.创建动画 四.动画运行 五.完整代码示例 六.相关资源 Animated ...

  8. 【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )

    文章目录 一.创建动画控制器 二.创建动画 三.设置值监听器 四.设置状态监听器 五.布局中使用动画值 六.动画运行 七.完整代码示例 八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...

  9. 【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )

    文章目录 一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...

  10. 【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )

    文章目录 一.Flutter 动画类型 二.Flutter 动画的核心类 三.相关资源 Flutter Animation 动画 : Flutter 动画类型 为 Widget 组件添加动画 为动画添 ...

最新文章

  1. 利用scrapy和MongoDB来开发一个爬虫
  2. DataSet RecordSet 互转
  3. 利用TaskCompletionSource将EAP转换成TAP
  4. markdown软件_实用软件推荐｜Markdown文本编辑器之Typora
  5. 计算机网络基础昆明理工大学,昆明理工大学 计算机网络基础 实验四
  6. React-native键盘遮挡输入框问题的解决
  7. C# Timer定时器用法
  8. 技术实践丨手把手教你使用MQTT方式对接华为IoT平台
  9. 8月22日见！iQOO Pro跑分曝光：近50万得分 无对手
  10. 【原创】微信支付遇到的各种坑及解决方案随笔记录，invalid signature， “errMsg“:“chooseWXPay:fail“
  11. python中自定义类中的self_学习python第52天
  12. mysql firstday_MySQL 计算本月的第一个和最后一个周一
  13. android设置view透明度渐变,android中 怎么实现一张图片从左到右透明度改变渐变消失的动画效果 Android 动态渐变 泽.. - 贪吃蛇学院-专业IT技术平台...
  14. 数据结构题集(C语言版 清华大学出版社)
  15. 一、项目分析（华为项目管理法-孙科炎读书摘要）
  16. 最新投影圣经投影赞美诗歌圣经诗歌2020
  17. 通讯录管理软件Cardhop for Mac
  18. layui自定义新增tab页方法
  19. python打九九乘法表上三角下三角_Python-零基础自学系列之九九乘法表、打印菱形、打印对顶三角形、打印闪电、斐波拉契数列、素数...
  20. libiconv库编译undefined reference to `aliases_lookup‘

热门文章

  1. aarch64(ARMv8)交叉编译环境下载
  2. 摄影测量--后方交会
  3. 哈夫曼（Huffman）编码问题（C++）
  4. freeswitch 发update sip消息_VOS修改SIP注册端口
  5. so文件linux注册,SO文件格式
  6. linux清缓存命令多节点,Liunx手动释放buffers/cache内存_linux,缓存,
  7. 华为matebook14会不会用鸿蒙,2020年用什么笔记本上网课？浅析华为MateBook 14 2020款...
  8. html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
  9. img解包打包工具_Python开发GUI实战：图片转换素描画工具！
  10. linux查看cpu占用率_Linux 性能查看