<!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. hdu2033

    http://acm.hdu.edu.cn/showproblem.php?pid=2033 1 #include<stdio.h> #include<string.h> #i ...

  2. DHTML_____window对象属性

    <html> <head> <meta charset="utf-8"> <title>window对象属性</title&g ...

  3. 创建 pulic dblink 使不同的用户可以访问dblink

    1. system: grant create public database link to ivrsdata; 2.userdate: tnsnames.ora config db connect ...

  4. Kali linux 2016.2（Rolling）安装之后的常用配置

    前言 使用默认的Kali Linux设置来学习是可以的,但是我们通常要修改系统的一些基本设置,来最大化使用Kali平台的功能. 以下内容 网络的基础知识 使用图形用户界面来配置网卡 使用命令行来配置网 ...

  5. [转]URL最大长度问题

    本文转自:http://www.cnblogs.com/henryhappier/archive/2010/10/09/1846554.html 今天在测试Email Ticket的时候发现在进行Ma ...

  6. js易混API汇总

    一:slice()方法 ————————————http://www.w3school.com.cn/jsref/jsref_slice_string.asp ———————————————————— ...

  7. RS485通信和Modbus协议（转）

    转自:http://www.51hei.com/bbs/dpj-23230-1.html 在工业控制.电力通讯.智能仪表等领域,通常情况下是采用串口通信的方式进行数据交换.最初采用的方式是RS232接 ...

  8. ADPU 大全

    APDU协议 APDU协议,即是智能卡与读写器间的应用层协议,在ISO7816-4[7]中定义了该协议的结构格式.APDU数据有两种结构,读写器使用的APDU结构为命令APDU,C-APDU(Comm ...

  9. python实现qq机器人qqbot

    title: python实现qq机器人qqbot tags: python date: 2018-6-1 10:19:00 --- 以下内容为转载 一.介绍 qqbot 是一个用 python 实现 ...

  10. C语言调用Python

    python模块:demo.py def print_arg(str): print str def add(a,b): print 'a=', a print 'b=', b return a + ...