<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    body {

        display: flex;              /* 使用Flex布局 */

        justify-content: center;    /* 水平居中 */

    }

    .ball {

        width: 100px;

        height: 100px;

        border-radius: 50%;         /* 把正方形变成圆形*/

        background-color: #FF5722;  /* 设置颜色为橙色*/

        animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);

        animation-direction: alternate;  //alternate(2,4,6)反向动画

        animation-iteration-count: infinite;

    }

    @keyframes bounce {

        from { transform: translate3d(0, 0, 0);     }

        to   { transform: translate3d(0, 200px, 0) rotateX(45deg); }

    }

</style>

<body>

<div class="ball"></div>

<script>

</script>

</body>

</html>

　　

Animations动画和Keyframes关键帧的更多相关文章

  1. 关键帧动画：@keyframes

    关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. iOS Programming Controlling Animations 动画

    iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...

  3. AngularJS–Animations(动画)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...

  4. css3动画（@keyframes和animation的用法）

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  5. css动画 aniamtion & @keyframes

    MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...

  6. android 之 animations 动画

    android 提供的了两种机制你可以用来创建简单的动画:tweedned animation(渐变动画) 和 frame-by-frame animation(逐帧动画)(有道翻译的,汗!!!) . ...

  7. Android Animations动画使用详解

    一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...

  8. CSS3 创建简单的网页动画 – 实现弹跳球动

    基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将 ...

  9. css3动画3

    1.transition过渡动画 2.@keyframes关键帧动画,配合transform.animation使用

随机推荐

  1. Windows8.1查看已连接无线WIFI密码

    Windows8.1操作系统下查看已连接无线wifi密码操作步骤如下: 1.右键任务栏中的无线图标,在弹出的菜单中选择"打开网络和共享中心": 2.在网络和共享中心界面中点击&qu ...

  2. 基于Web的Kafka管理器工具之Kafka-manager启动时出现Exception in thread "main" java.lang.UnsupportedClassVersionError错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)   问题详情 我在Kaf ...

  3. 数据采集框架Gobblin简介

    问题导读: Gobblin的架构设计是怎样的? Gobblin拥有哪些组建,如何实现可扩展? Gobblin采集执行流程的过程? 前面我们介绍Gobblin是用来整合各种数据源的通用型ETL框架,在某 ...

  4. 不讲CRUSH的Ceph教程是不完整的

    前面我们提到了Ceph是一个支持统一存储架构的分布式存储服务.简单介绍了Ceph的基本概念和基础架构包含的组件,其中最重要的就是底层的RADOS和它的两类守护进程OSD and Monitor.上篇文 ...

  5. php-5.3源码编译autoconf版本不符合解法

    1. 网上下载符合版本的autoconf 2. 卸载本地原本的autoconf 3. 解压autoconf 后进入目录 ./configure && make && s ...

  6. Paxos，Raft，Zab一致性协议-Raft篇

    Raft是一个一致性算法,旨在易于理解.它提供了Paxos的容错和性能.不同之处在于它被分解为相对独立的子问题,它清楚地解决了实际系统所需的所有主要部分.我们希望Raft能够为更广泛的受众提供共识,并 ...

  7. leetcode523 Continuous Subarray Sum

    思路: 令sum[p]表示p位置的前缀和.如果sum[i] % k == sum[j] % k (j - i > 1),则存在子段(i, j]的和能够整除k. 实现: class Solutio ...

  8. CSS 按钮特效(二)

    1 案例 2. HTML 代码 <div class="arrow arrow-left-middle"> arrow-left-middle </div> ...

  9. 2) 十分钟学会android--建立第一个APP，执行Android程序

    通过上一节课创建了一个Android的Hello World项目,项目默认包含一系列源文件,它让我们可以立即运行应用程序. 如何运行Android应用取决于两件事情:是否有一个Android设备和是否 ...

  10. Linux 配置 nginx + php

    为什么!!!我配过的服务器已经有5.6个了吧,为什么每一次配置都能要了我的老命??这次写清楚过程,以后再要被配服务器坑,我特么要砍人了. 提示:测试网站能否访问的时候,最好关掉浏览器的缓存功能或者勤清 ...