<!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. 思维题 UVA 10881 Piotr's Ants

    题目传送门 /* 题意:在坐标轴上一群蚂蚁向左或向右爬,问经过ts后,蚂蚁的位置和状态 思维题:本题的关键1:蚂蚁相撞看作是对穿过去,那么只要判断谁是谁就可以了 关键2:蚂蚁的相对位置不变 关键3:o ...

  3. U - Relatives（欧拉函数）

    Description Given n, a positive integer, how many positive integers less than n are relatively prime ...

  4. Axis通过wsdd部署Web Service

    axis网上的教程很多,不过搜来搜去,总是只有那么几篇.仔细看了一下那几篇文章,都感觉到不是自己想要的,所以自己整理了一篇分享一下. 本文介绍axis应用的一个小例子,没有麻烦的命令行操作,只需照下面 ...

  5. 377 Combination Sum IV 组合之和 IV

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  6. 发生在升级OS X Yosemite后：修复各种开发环境

    本博文最初发布于我的个人博客<Jerry的乐园> 终于还是忍不住升级了,促使我升级的原动力居然是Alfred的Yosemite theme居然比初始theme好看很多!在升级前就预想到我的 ...

  7. 简单的win7-cmd命令提示符

    在win7打开cmd窗口 有两个路径:(1)开始 -->所有程序 --> 附件 --> 命令提示 (2)开始 -->在搜索框输入 “cmd”   指令 作用 对文件夹的操作   ...

  8. Java编程思想读书笔记_第6章（访问权限）

    四种访问权限: public private 包访问权限 protected 如果没有明确指定package,则属于默认包 package access.dessert; public class C ...

  9. Maven之pom.xml详释

    什么是pom? POM(Project Object Model):全称项目对象模型,它是Maven项目中的文件,使用XML表示,名称叫做pom.xml.在Maven项目中,必须包含pom.xml文件 ...

  10. 【转载】原 IntelliJ IDEA (idea)引入eclipse web项目

    原文地址:http://my.oschina.net/u/1170781/blog/192731 摘要 概述IntelliJ IDEA,以后都简称为idea,鼓捣了很久,看了很多例子才搞出来,希望对其 ...