<!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. MySQL的xml中对大于，小于，等于的处理转换

    原符号   <    <=    >    >=     &      '       " 替换符号 < <= > >= & ...

  2. JS规则 编程练习 考考大家的数学，计算以下计算公式的结果。然后在浏览器中运行一下，看看结果是否跟你的结果一致。

    编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在  ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...

  3. ps axu 参数说明

    问题:1.ps axu  看到进程的time不清楚什么意思 ru: resin    31507  0.2  1.3 3569452 98340 ?       Sl   Jul28   7:11 / ...

  4. opencv编译:The CXX compiler identification is unknown The C compiler identification is unknown

    opencv编译:The CXX compiler identification is unknown The C compiler identification is unknown 解决方法: F ...

  5. Loadrunner学习---脚本编写(1)

    Loadrunner学习---脚本编写(1) 中午看了两集<奋斗>发现越看越想看,但是想到好不容易没上班,在家还是赶紧学习下LR的知识吧.下面这个网页的文章原来也是看过的,但发现没几天就忘 ...

  6. 阿里云 Aliplayer高级功能介绍(四)：直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

  7. escape encodeURI和encodeURIComponent的区别

    escape(与之对应->unescape) escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的效果是%XX或者%uXXXX这种形式 ...

  8. 使用WCF上传文件

              在WCF没出现之前,我一直使用用WebService来上传文件,我不知道别人为什么要这么做,因为我们的文件服务器和网站后台和网站前台都不在同一个机器,操作人员觉得用FTP传文件太麻 ...

  9. PAT甲级——A1009 Product of Polynomials

    This time, you are supposed to find A×B where A and B are two polynomials. Input Specification: Each ...

  10. JVM基础总结