<!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. spark 应用场景1-求年龄平均值

    原文引自:http://blog.csdn.net/fengzhimohan/article/details/78535143 该案例中,我们将假设我们需要统计一个 10 万人口的所有人的平均年龄,当 ...

  2. C++头文件记得加#pragma once

    C++头文件记得加#pragma once不然可能会导致重定义类

  3. bat删除多少天前的文件包含子目录

    通过 Forfiles 删除指定目录下过期的备份文件 /*-- 用法详解 D:/>forfiles /? FORFILES [/P pathname] [/M searchmask] [/S] ...

  4. 【JZOJ3319】雪地踪迹

    description 森林里有一片长方形的草地,在清晨的大雪过后被一层厚厚的积雪所掩盖(下图左). 住在森林里的兔子和狐狸,穿越草地,都会在雪地上留下他们的踪迹.他们总是从左上角进入,并从右下角离开 ...

  5. SSM项目实现连接两个mysql数据库

    最近做项目需要用到另一个数据库的内容,多方查找终于实现了功能. 我们都知道,在SSM框架中,我们在applicationContext.xml配置文件中添加数据源就可以实现数据库增删改查,但是只能连接 ...

  6. System.Web.Mvc.ViewEngineResult.cs

    ylbtech-System.Web.Mvc.ViewEngineResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...

  7. 2006-2007 ACM-ICPC | POJ3380 POJ3384 POJ3385 水题题解

    // CF比赛链接:http://codeforces.com/gym/101650 // POJ链接:http://poj.org/searchproblem?field=source&ke ...

  8. java日志管理 - slf4j+log4j2

    1 . 概述 1.1  日志框架实现 log4j是apache实现的一个开源日志组件: logback同样是由log4j的作者设计完成的,拥有更好的特性,用来取代log4j的一个日志框架,是slf4j ...

  9. 「loj#6261」一个人的高三楼

    题目 显然存在一个这样的柿子 \[S^{(k)}_i=\sum_{j=1}^iS^{(k-1)}_j\] 我们可以视为\(S^{(k)}\)就是由\(S^{(k-1)}\)卷上一个长度为\(n\)全是 ...

  10. 阿里巴巴毕玄解密AIOps：一文读懂阿里巴巴运维体系的前世今生

    [编者按]林昊(毕玄),阿里巴巴研发效能事业部负责人.2007年加入阿里,10年间打造了阿里目前使用最为广泛的核心中间件之一的服务框架:建设了阿里的HBase团队,发展到今天HBase已经是阿里最重要 ...