<!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. Pyqt5_QlineEdit

    QlineEdit 方法 setAlignment() 按固定值方式对齐文本 Qt.AlignLeft:水平方向靠左对齐 Qt.AlignRight:水平方向靠右对齐 Qt.AlignCenter:水 ...

  2. Kubernetes Dashborad 搭建

    需求 基于网页查看Kubernetes 用户管理界面 安装步骤 在控制面板节点部署dashborad kubectl apply -f https://raw.githubusercontent.co ...

  3. StringUtils、CollectionUtils工具类的常用方法

    唯能极于情,故能极于剑 欢迎来到 “程序牛CodeCow” 的博客,有问题请及时关注小编公众号 “CodeCow”,大家一起学习交流 下面将为大家演示StringUtils.CollectionUti ...

  4. Mac下搭建atx2环境

    Git-atx2官网地址,默认已有python3环境 1.安装rethinkdb 安装db:mac上安装很简单,执行brew install rethinkdb 启动db:nohup rethinkd ...

  5. 关于Java两点需要更新的知识

    HashMap的初始容量 背景 很多人可以把HashMap的原理描述的很溜.比如JDK1.7之前,底层数据结构是数组+链表.JDK1.8之后,出于效率上的考虑,在数组长度大于64,链表长度大于8的时候 ...

  6. [JavaWeb基础] 013.Struts2 自定义类型转换器

    很多时候,我们在做web开发的时候经常要用到时间的转换器,Struts2给我们提供了一种类型转换器的接口.下面我们讲讲怎么实现吧. 1.首先我们要定义一个类型转换的类,继承自com.babybus.s ...

  7. [JavaWeb基础] 003.JAVA访问Mysql数据库

    上面两篇讲解了简单的JSP + Servlet的搭建和请求,那么后面我们肯定要用到数据交互,也就是操纵数据库的数据,包括对数字的增加,删除,修改,查询.我们就用简单的MySql来做例子 我们需要引入驱 ...

  8. C++ 海量代码 排查内存/GDI泄漏历程

    排查分两大部分: 1.代码静态分析,通过Code Review查找不合规范的代码点: 2.运行目标软件,结合内存监控工具,分析目标软件的代码,定位内存泄漏点. 目前能找到的代码静态分析软件:Cover ...

  9. 创建多线程的方式&Thread类的常用方法

    创建多线程的第一种方式:继承java.lang.Thread类 注意:1.一个线程只能执行一次start() 2.不能通过Thread实现类对象的 run()去启动一个线程 3.增加加一个线程,需要新 ...

  10. jQuery-stop方法

    1.stop()方法解析 停止所有在指定元素上正在运行的动画 stop(clearQueue,gotoEnd) 这个两个参数可选值是布尔值 stop(flase,flase):不请空动画队列,不立即跳 ...