<!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. visual studio 2017--括号自动补全

    ---恢复内容开始--- 平常在visual studio中编写C++代码,一般括号之类的都是自动补全的,最近想用来编写Python,发现括号不能补全了,很不适应. Python编写时好像括号好像默认 ...

  2. 2018-2-13-安装visualStudio-出现-cant-install-Microsoft.TeamFoundation.OfficeIntegration.Resources...

    title author date CreateTime categories 安装visualStudio 出现 cant install Microsoft.TeamFoundation.Offi ...

  3. (转)Linux使用RSA密钥登录远程服务器

    一切操作都在本机执行,不需要进入远程主机/服务器~~ 1.生成密钥.默认生成的是rsa加密. ssh-keygen 2.私钥是给本地的,公钥是给远程的.下面将公钥上传到远程服务器 ~ ssh-copy ...

  4. Luogu P2484 [SDOI2011]打地鼠(模拟+前缀和)

    P2484 [SDOI2011]打地鼠 题意 题目描述 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地 ...

  5. Consul 集群搭建

    搭建集群:.启动node1机器上的Consul (node1机器上执行) consul agent -data-dir /tmp/node1 -node=node1 -bind=192.168.0.1 ...

  6. Myeclipse 10使用hibernate生成注解(annotation)实体类

    以MySQL数据库为例,请在数据库里面建好对应的表. 1.配置数据库链接 打开Myelipse Database Explorer视图 Window-->Open Perspective--&g ...

  7. LINQ学习系列-----3.1 查询非泛型集合和多个分组

    一.查询非泛型集合 1.问题起源 LINQ to object在设计时,是配合IEnumerable<T>接口的泛型集合类型使用的,例如字典.数组.List<T>等,但是对于继 ...

  8. RvmTranslator7.2

    1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...

  9. day 42 03--CSS布局设置

      03--CSS布局设置   本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 ...

  10. C# 读写 Photoshop PSD文件 操作类

    分析了PSD的文件....才发现PSD的RGB色彩保存也是 先红 蓝 绿 这样保存的 ....麻烦的.. 另外8BIM好象没什么用..可以直接跳过..直接获取最后的图形信息就可以了.. 我只对一些PS ...