<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             .box{

                 width: 500px;

                 height: 500px;

                 background: skyblue;

             }

             .box1{

                 width: 100px;

                 height: 100px;

                 background: skyblue;

                 /*transition: 1s;*//*过渡 需要事件触发*/

                 /*使用animation调用关键帧*/

                 /*animation:mz 3s;综合写法*/

                 animation-name: mz2;/*关键帧名字 动画名*/

                 animation-duration: 2s;/*关键帧时长 总运动时间*/

                 animation-delay: 3s;/*关键帧延迟时间*/

                 animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/

                 animation-direction: reverse;/*运动方向*/

                 animation-direction: alternate;/*先正向再反向*/

                 animation-direction: alternate-reverse;

                 animation-timing-function: ease;/*运动使用的类型*/

                 animation: mz2 2s 1s linear infinite;

             }

             .box:hover .box1{

                 animation-play-state: running;/*鼠标移入暂停*/

             }

             /*定义动画*/

             @keyframes mz{

                 from{margin-left: 0;}

                 to{

                     margin-left: 500px;

                 }

             }

             @keyframes mz2{

                 0%{/*初始状态*/

                     margin-left: 0px;

                     margin-bottom: 0px;

                 }

                 25%{

                     margin-left: 500px;

                     margin-top: 0px;

                 }

                 50%{

                     margin-left: 500px;

                     margin-top: 400px;

                 }

                 75%{

                     margin-left: 0px;

                     margin-top: 400px;

                 }

                 100%{

                     margin-left: 0px;

                     margin-top: 0px;

                 }

             }

         </style>

     </head>

     <body>

         <div class="box">

             <div class="box1">

         </div>

     </body>

 </html>

css3动画的实例讲解的更多相关文章

  1. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  2. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

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

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

  4. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

  5. 高性能 CSS3 动画

    注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...

  6. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  7. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  8. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  9. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. [原创]RTX使用printf输出后进入hardfault中断的处理方法 - 讨论

    今天我用到RTX里面使用printf ,发现程序死掉了 我发现很多人遇到了这样的问题 找了网上很多的文章,说是这个是RTX的一个先天不足的问题 我发现了正点原子的 原子哥的解决方案,如下所示: --- ...

  2. 剑指Offer之替换空格

    题目描述:请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 函数实现: package s ...

  3. Golang源码学习：调度逻辑（四）系统调用

    Linux系统调用 概念:系统调用为用户态进程提供了硬件的抽象接口.并且是用户空间访问内核的唯一手段,除异常和陷入外,它们是内核唯一的合法入口.保证系统的安全和稳定. 调用号:在Linux中,每个系统 ...

  4. [PHP学习教程 - 文件]002.判断远程文件是否存在(Remote File Exists)

    引言:项目过程当中碰到了类似流程这样的需求,对服务器上的文件进行依次操作,如:检查文件格式->检查文件是否有更新->处理更新->同步其他服务器等等 如果需求的操作是依赖于远程文件是否 ...

  5. JavaScript的历史由来及简介

    JavaScript的历史由来及简介 前言 这次写一篇对于JavaScript的简介,我们知道的编程语言有很多种,比如Java.C++.Python等等,每种编程语言都有其独具的特色,不论是语法格式还 ...

  6. 从软件开发到 AI 领域工程师：模型训练篇

    前言 4 月热播的韩剧<王国>,不知道大家有没有看?我一集不落地看完了.王子元子出生时,正逢宫内僵尸作乱,元子也被咬了一口,但是由于大脑神经元尚未形成,寄生虫无法控制神经元,所以医女在做了 ...

  7. Rocket - util - Annotations

    https://mp.weixin.qq.com/s/7C8ZmPpwAqFqyKjL9K40Fg   介绍util中定义的注解(Annotations).   ​​   1. Annotation ...

  8. Rocket - diplomacy - NodeHandle相关类

    https://mp.weixin.qq.com/s/GWL41P1G1BXm2sTeLmckdA   介绍NodeHandle相关的类.     ​​   1. NoHandle   顶层类(tra ...

  9. Rocket - config - View

    https://mp.weixin.qq.com/s/b5o3s2DgqOz3-iK8FqPeLQ   介绍配置相关的基础类及其继承关系.   参考链接: https://github.com/fre ...

  10. Java实现 LeetCode 47 全排列 II（二）

    47. 全排列 II 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] class Solut ...