<!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. 239 Sliding Window Maximum 滑动窗口最大值

    给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口 k 内的数字.滑动窗口每次只向右移动一位.例如,给定 nums = [1,3,-1,-3, ...

  2. Hadoop Hive概念学习系列之hive的索引及案例（八）

    hive里的索引是什么? 索引是标准的数据库技术,hive 0.7版本之后支持索引.Hive提供有限的索引功能,这不像传统的关系型数据库那样有“键(key)”的概念,用户可以在某些列上创建索引来加速某 ...

  3. Spring框架学习-Spring和IOC概述

    一:什么是Spring框架? spring是一个分层的javase/EEfull-stack(一站式)轻量级的java开源框架.是为了解决企业开发的复杂性而创建的.框架的主要优势是分层架构,Sprin ...

  4. PHP语言开发Paypal支付demo的具体实现

    如果我们的应用是面向国际的.那么支付的时候通常会考虑使用paypal.以下为个人写的一个paypal支付示例,已亲测可行.paypal有个很不错的地方就是为开发者提供了sandbox(沙箱)测试功能. ...

  5. 面试中的一些小问题之html5和html4的区别？

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  6. Ajax异步刷新省市级联

    省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...

  7. iOS,Core Animation--负责视图的复合功能

    简介 UIKit API UIKit是一组Objective-C API,为线条图形.Quartz图像和颜色操作提供Objective-C 封装,并提供2D绘制.图像处理及用户接口级别的动画.    ...

  8. docker在ubuntu16.04下的安装及阿里云镜像的配置

    1.获取最新版本的 Docker 安装包 anmin@ubuntu:~$ wget -qO- https://get.docker.com/ | sh 安装完成后有个提示: If you would ...

  9. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

  10. vivo手机执行input命令提示killed

    异常现象: 使用vivo手机时发现通过inputManager发送按键.执行屏幕滑动等动作失效,相关API并没有任何异常抛出,继续跟踪发现shell控制台执行input进行屏幕滑动.发送文本.模拟按键 ...