<!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. JS流程控制语句 重复重复（for循环）语句结构： for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...

  2. Entity Framework Code First 模式-建立一对一联系

    使用的例子为教室(ClassRoom),教室里的多媒体设备(Device),一个教室里有一套多媒体设备,一套多媒体设备只放在一个教室里. 1.Data Annotations方式 需要在任意一方的主键 ...

  3. Android 开发 MediaRecorder使用Camera1配合录制视频

    前言 MediaRecorder可以不依靠Camera API 实现视频的录制,但是如果需要切换摄像头/设置对焦/选择分辨率等等就需要Camera来参与配合录制视频.这篇博客将介绍使用Camera1来 ...

  4. h5页面在不同ios设备上的问题总结

    1.日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种 ...

  5. java实践经验几种常见数据库连接池的使用比较

    经历的几个产品及项目中,包括了各种数据库及应用服务器,基本上几种常见的数据库连接池都用到了,根据使用的情况把这些连接池比较一下吧.(http://m.0834jl.com) 感觉在介绍之前有必要阐述一 ...

  6. csp-s模拟测试61砖块, 数字,甜圈题解

    题面:https://www.cnblogs.com/Juve/articles/11626350.html 砖块: 直接模拟即可,map统计被覆盖的次数 #include<iostream&g ...

  7. BZOJ2226:[SPOJ5971]LCMSum

    Description Given n, calculate the sum LCM(1,n) + LCM(2,n) + .. + LCM(n,n), where LCM(i,n) denotes t ...

  8. PAT甲级——A1105 Spiral Matrix【25】

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  9. 《DSP using MATLAB》Problem 8.26

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  10. 可怜的baidu，可怜的音库

    baidu词典中用的中文音库竟然全都是汉典的中文音库   真可怜,baidu这么大个公司竟然连着1250个发音都懒得录   汉典的音库布都是同一格式,导致一部分音频文件MCI函数无法播放   真他妈可 ...