1. html 结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Keyframes 02</title>
  8. </head>
  9. <body>
  10.   <div class="box"></div>
  11. </body>
  12. </html>

2. css 样式

  1. body {
  2.       background-color: #333;
  3.     }
  4.     .box {
  5.       background-color: #fff;
  6.       width: 200px;
  7.       height: 200px;
  8.       position: relative;
  9.       top: 0;
  10.       left: 0;
  11.       animation: anim 2s forwards ease-in-out;
  12.     }
  13.  
  14.     @keyframes anim {
  15.       25% {
  16.         top: 0;
  17.         left: 300px;
  18.         background-color: cornflowerblue;
  19.         border-radius: 50% 0 0 0;
  20.       }
  21.       50% {
  22.         top: 300px;
  23.         left: 300px;
  24.         background-color: brown;
  25.         border-radius: 50% 50% 0 0;
  26.       }
  27.       75% {
  28.         top: 300px;
  29.         left: 0;
  30.         background-color: blueviolet;
  31.         border-radius: 50% 50% 50% 0;
  32.       }
  33.       100% {
  34.         top: 0;
  35.         left: 0;
  36.         background-color: aqua;
  37.         border-radius: 50%;
  38.       }
  39.     }

css 动画 (2)的更多相关文章

  1. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  2. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  3. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  4. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  5. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  8. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  10. Animo.js ：一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

随机推荐

  1. FrameScan CMS漏洞扫描

    工具简介 GithubL:https://github.com/qianxiao996/FrameScan FrameScan是一款python3编写的简易的cms漏洞检测框架,支持多种检测方式,支持 ...

  2. sublime settings

    { "font_face": "Monaco", // 编辑器的字体 "font_size": 13, // 字号 "highli ...

  3. Django1.11 添加markdown语法支持

    pip install markdown 在view.py 的视图界面:导入,圈起来的那两个包 对post进行处理, models.py 详情如下  测试,效果如图

  4. MATLAB奔溃仅左上角显示关闭界面X

    一  问题描述 今天在MATLAB调试图像增强程序时,忽然间点了MATLAB向下还原,奇怪的一幕发生了,电脑左上角仅显示关闭图标X.我就搜了MATLAB中文论坛(https://www.ilovema ...

  5. 使用过 Redis 做异步队列么，你是怎么用的？

    答:一般使用 list 结构作为队列,rpush 生产消息,lpop 消费消息.当 lpop 没有 消息的时候,要适当 sleep 一会再重试. 如果对方追问可不可以不用 sleep 呢? list ...

  6. ubuntu18.04设置开机自启Django

    设置开机自启: rc-local.server [Unit] Description=/etc/rc.local Compatibility ConditionPathExists=/etc/rc.l ...

  7. Kafka 分区的目的？

    分区对于 Kafka 集群的好处是:实现负载均衡.分区对于消费者来说,可以提高并发度,提高效率.

  8. 你如何确保 main()方法所在的线程是 Java 程序最后结束 的线程？

    我们可以使用 Thread 类的 join()方法来确保所有程序创建的线程在 main()方法退出前结束.

  9. Java 中用到的线程调度算法是什么?

    抢占式.一个线程用完 CPU 之后,操作系统会根据线程优先级.线程饥饿情况等 数据算出一个总的优先级并分配下一个时间片给某个线程执行.

  10. TIME_WAIT 优化注意事项

    不同时开启tcp_timestamps和tcp_tw_recycle的场景描述 FULL NAT下 FULL NAT  在client请求VIP 时,不仅替换了package 的dst ip,还替换了 ...