<!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. 通过路由器的IP映射来解决，两个不同IP地址的PC机之间的从LAN口到WAN口的单向通讯问题

    1.问题假设: 在B机中IP地址与子网掩码都固定,网关是路由器的LAN口的IP地址,我们希望通过路由器来实现B机与A机之间的单向通讯问题,也就是说B可以ping通A且可以访问A提供的FTP站点. 2. ...

  2. 构造 Codeforces Round #107 (Div. 2) B. Phone Numbers

    题目传送门 /* 构造:结构体排个序,写的有些啰嗦,主要想用用流,少些了判断条件WA好几次:( */ #include <cstdio> #include <algorithm> ...

  3. Spark SQL概念学习系列之Spark SQL入门（八）

    前言 第1章   为什么Spark SQL? 第2章  Spark SQL运行架构 第3章 Spark SQL组件之解析 第4章 深入了解Spark SQL运行计划 第5章  测试环境之搭建 第6章 ...

  4. MySQL 8.*版本 修改root密码

    MySQL .*版本 修改root密码 查看版本:select version() from dual; 1.6. 登录mysql: 登录mysql:(因为之前没设置密码,所以密码为空,不用输入密码, ...

  5. ubuntu系统nginx+Redis+PHP

    一.安装ngnix apt-get update sudo apt-get install nginx /etc/init.d/nginx start 二.安装php sudo apt-get ins ...

  6. cmd命令安装、卸载、启动和停止Windows Service

    1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft.NET ...

  7. Spring事物不回滚

    今天发现个自己的bug,仔细排查后,发现根本原因我在service方法中抛出的异常被控制层的方法捕获了,所以后台页面也只是出现个错误提示,而数据却没有回滚. 解决方式:对自己抛出的异常使用try ca ...

  8. IOS上MediaPlayer framework实现视频播放

    播放电影文件: iOS sdk中可以使用MPMoviePlayerController来播放电影文件.但是在iOS设备上播放电影文件有严格的格式要求,只能播放下面两个格式的电影文件. • H.264 ...

  9. 「 COGS 1669 」 神秘的咒语

    题目大意 这出题人太凉心,居然给我句鸟语.(连我最爱的OI也被鸟语污染了吗) 下面给大家说说这句鸟语啥意思.不要误会,都是度娘的功劳 QAQ 之前不是给出了两个伪咒语吗. 这句鸟语就是说真正的咒语就是 ...

  10. IntelliJ IDEA 环境设置——侧栏显示类中所有方法

    myeclipse默认会在右侧栏显示类的所有方法框,但是IDEA里并没有这样的初始化设置 那么怎样显示这个功能? 1.点击工具栏View-->Tool Windows-->Structur ...