1. html 结构

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Keyframes 02</title>

</head>

<body>

  <div class="box"></div>

</body>

</html>

2. css 样式

body {

      background-color: #333;

    }

    .box {

      background-color: #fff;

      width: 200px;

      height: 200px;

      position: relative;

      top: 0;

      left: 0;

      animation: anim 2s forwards ease-in-out;

    }

    @keyframes anim {

      25% {

        top: 0;

        left: 300px;

        background-color: cornflowerblue;

        border-radius: 50% 0 0 0;

      }

      50% {

        top: 300px;

        left: 300px;

        background-color: brown;

        border-radius: 50% 50% 0 0;

      }

      75% {

        top: 300px;

        left: 0;

        background-color: blueviolet;

        border-radius: 50% 50% 50% 0;

      }

      100% {

        top: 0;

        left: 0;

        background-color: aqua;

        border-radius: 50%;

      }

    }

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. [SPDK/NVMe存储技术分析]002 - SPDK官方介绍

    Introduction to the Storage Performance Development Kit (SPDK) | SPDK概述 By Jonathan S. (Intel), Upda ...

  2. P1030

    题面 给出一棵二叉树的中序排列与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度≤8). 输入格式 2行,均为大写字母组成的字符串,表示一棵二叉树的中序排列与后序排列. 输出格式 1 ...

  3. leetcode210.拓扑排序

    拓扑排序能否成功,其实就是看有没有环 有环:说明环内结点互为前置,永远也不可能完成 无环:是线性的,可以完成 DFS方法 思路: 逆向思维,遍历到边界点(无邻接点相当于叶子),再不断回溯将结点加入到结 ...

  4. js正则表达式处理表单

    1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  5. synchronized底层实现原理及锁优化

    一.概述 1.synchronized作用 原子性:synchronized保证语句块内操作是原子的 可见性:synchronized保证可见性(通过"在执行unlock之前,必须先把此变量 ...

  6. Java 中，受检查异常 和 不受检查异常的区别？

    受检查异常编译器在编译期间检查.对于这种异常,方法强制处理或者通过 throws 子句声明.其中一种情况是 Exception 的子类但不是 RuntimeException 的子类.非受检查是 Ru ...

  7. BMZCTF 2020祥云杯到点了

    2020祥云杯到点了 下载附件得到三个word文档,我们打开第一个文档然后将隐藏文字显示出来 得到提示 我们查看属性应该就是日期了我们先把他记录下来 然后打开第二个文档 输入刚刚的密码 在第二个wor ...

  8. PIC16F877A.H头文件详细注释

    /* * Header file for the Microchip  * PIC 16F873A chip * PIC 16F874A chip * PIC 16F876A chip * PIC 1 ...

  9. the compatibility problem of ie

    ie8hack ie8下的兼容问题处理:背景透明,css3圆角,css3和jquery支持部分css3选择器(例如:nth-child),支持html5的语义化标签,媒体查询@media等. 在htm ...

  10. 10行 JavaScript 实现文本编辑器

    背景 我们平时用到的浏览器编辑器功能都会比较多,实现的代码逻辑也会非常复杂,往往是作为一个单独插件被引入进来的.但是,现在我只需要一个很基本的内容输入内容编辑的功能,如:粗体.斜体.列表.对齐等.那要 ...