<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px}

        .box2{width: 50px;height: 120px;background: black;}

        .box{ animation: top1 1s ease-out forwards}

        .box2{ animation:  right1 1s ease-in forwards ;}

       @keyframes top1 {

          0%{transform: translateY(0px) ;}

          100%{transform: translateY( -200px) ;}

      }

        @keyframes right1 {

            0%{transform: translateX(0px) rotate(0deg);}

            100%{transform: translateX(200px) rotate(90deg);}

        }

    </style>

</head>

<body>

<div class="box">

    <div class="box2"></div>

</div>

</body>

</html>

第一种写法通过两个盒子执行不同动画，第二种通过一个盒子执行两个动画。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .box{

        text-align: center;

        width: 50px;

        height: 80px;

        border-radius: 10px;

        background: black;

        position: absolute;

        animation:bimg1 2s ease-out forwards,bimg2 2s ease-in forwards;

        /*ease-out ,和ease-in 顺序不能反*/

    }

    .main{width: 30px;height: 10px;background: whitesmoke;margin: 85% auto;border-radius: 2px}

    @keyframes bimg1 {

        0% {top: 0;transform: rotate(0deg)}

        100% {top: 200px;transform: rotate(-90deg)}

    }

    @keyframes bimg2 {

        0%  {left: 0;}

        100% {left: 400px;}

    }

</style>

<body>

<div class="box">

    <div class="main"></div>

</div>

</body>

</html>

css3动画曲线运动的更多相关文章

  1. CSS3动画与JS动画的优缺点？

    JS动画: 缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况. 2.JS动画代码复杂度高于CSS3动画. 优点: ...

  2. CSS3动画和JS动画的比较

    前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...

  3. css3动画与js动画的区别

    css与 js动画 优缺点比较   我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...

  4. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  5. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  6. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  7. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  8. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. 自己新机器安装CM时候 server服务启动DB配置

    com.cloudera.cmf.db.type=mysqlcom.cloudera.cmf.db.host=localhost:3306com.cloudera.cmf.db.name=cmfcom ...

  2. 2 _ 基本框架 _ 检测VMX环境

    VT 是先开为大,谁先开谁上层,谁上层 谁权限大. 1 判断是否支持 VMX intel 白皮书 第3卷 传入 参数eax =1, 返回值 ecx 的第5位 = 1 则 surpported VMX. ...

  3. JS规则 我还有其它用途( +号操作符）例如，算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)

    我还有其它用途( +号操作符) 操作符是用于在JavaScript中指定一定动作的符号. (1)操作符 看下面这段JavaScript代码. sum = numa + numb; 其中的"= ...

  4. SaltStack远程执行Windows job程序(黑窗口)填坑经过

    近期接到领导通知,要将公司内的所有Windows服务添加到自动发布系统中,由于这种服务很多,节点分布散乱,每次都是由开发主管手动替换(虽然他们自己开发了自动打包替换工具,但仍需要一台一台登陆到服务器上 ...

  5. shell脚本使用需要注意的地方

    shell脚本中,函数内部定义变量可以为局部变量和全局变量,局部变量使用local定义,全局变量不带local,全局变量可以在函数外部可见,如下: #!/bin/bash function calle ...

  6. poj3167- Cow Patterns

    传送门 两个串相等定义为串中每一位排序后的相对大小相等. 一位相等等价于这一位前面比他小的和等于他的数的个数相等. 那么用kmp,比较的时候比较这两个个数就可以了. 一开始很瓜地想,询问一段区间内比我 ...

  7. css - 常见知识点

    1. 盒模型 页面渲染时,dom 元素所采用的 布局模型.可通过box-sizing进行设置.根据计算宽高的区域可分为: content-box (W3C 标准盒模型) border-box (IE ...

  8. Vue生命周期的执行过程(面试必备) 极简版

    最近准备面试,临时抱佛脚的来回顾一下vue相关的面试题,当然这是不对的,平时还是要努力呀,走起: 1.创建vue实例,Vue(); 2.在创建Vue实例的时候,执行了init(),在init过程中首先 ...

  9. Installer - win10安装及卸载SQL Server2008数据库

    一.数据库安装环境 操作系统:win10 SQL server:SQL server 2008 R2 二.全新数据库安装 1.安装扩展文件 双击安装文件,弹出如下窗体:                 ...

  10. Python中实现对list做减法操作介绍

    Python中实现对list做减法操作介绍 这篇文章主要介绍了Python中实现对list做减法操作介绍,需要的朋友可以参考下 问题描述:假设我有这样两个list, 一个是list1,list1 = ...