<!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. java——定时任务

    java定时任务直接看代码 public void timeTask(){ Timer timer = new Timer(); timer.schedule(new TimerTask() { pu ...

  2. Mybaties 的缓存

    1.mybaties 默认会话是一级缓存,没有开启二级缓存.开启方式在mapper文件中设置<cache /> 2.<cache eviction="LRU" f ...

  3. solr学习（笔记） windows10+jdk1.8+tomcat8环境部署

    一:准备环境 1.1 »tomcat8.5下载地址:https://tomcat.apache.org/download-80.cgi 1.2 solr各版本下载地址:http://archive.a ...

  4. 循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  5. Unity 游戏框架搭建 2019 (五十二~五十四) 什么是库？&第四章总结&第五章简介

    在上一篇,我们对框架和架构进行了一点探讨.我们在这一篇再接着探讨. 什么是库呢? 来自同一位大神的解释: 库, 插到 既有 架构 中, 补充 特定 功能. 很形象,库就是搞这个的.我们的库最初存在的目 ...

  6. 【Java8新特性】关于Java8中的日期时间API，你需要掌握这些！！

    写在前面 Java8之前的日期和时间API,存在一些问题,比如:线程安全的问题,跨年的问题等等.这些问题都在Hava8中的日期和时间API中得到了解决,而且Java8中的日期和时间API更加强大.立志 ...

  7. Spring （ 三 ） Spring的Bean的装配与生命周期、专用测试

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.对象的生命周期 1.IOC之Bean的生命周期 创建带有生命周期方法的bean public cla ...

  8. 【JVM】垃圾回收器总结（2）——七种垃圾回收器类型

    七种垃圾回收器类型 GC的约定参数 DefNew——Default New Generation Tenured——Serial Old ParNew——Parallel New Generation ...

  9. Java实现 LeetCode 659 分割数组为连续子序列 (哈希)

    659. 分割数组为连续子序列 输入一个按升序排序的整数数组(可能包含重复数字),你需要将它们分割成几个子序列,其中每个子序列至少包含三个连续整数.返回你是否能做出这样的分割? 示例 1: 输入: [ ...

  10. Java实现 蓝桥杯VIP 算法训练 Hanoi问题

    问题描述 如果将课本上的Hanoi塔问题稍做修改:仍然是给定N只盘子,3根柱子,但是允许每次最多移动相邻的M只盘子(当然移动盘子的数目也可以小于M),最少需要多少次? 例如N=5,M=2时,可以分别将 ...