<!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. OpenStack之Neutron模块

    一:简介     一.概述 1. 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要创建.修改和删除网络 ...

  2. vue展开过度动画

    有一段时间没用vue动画了,就忘了,又仔细去看了vue官网 的过渡&动画,记录下来方便快速使用 (可以多看vue官网 过渡&动画 实现更多效果) 1.实际效果 展开收起效果.gif 2 ...

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

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

  4. 用tarjan求LCA板子（比倍增快）

    懒!!直接转载!!!! https://solstice23.top/archives/62

  5. [FlashDevelop] 001.FlashDevelop + LayaFlash环境搭建

    产品简介: 唯一使用Flash直接开发或转换大型HTML5游戏的全套解决方案. 开发工具 FlashDevelop + JDK + flashplayer_18_sa_debug + LayaFlas ...

  6. @Spring Boot程序员，我们一起给程序开个后门吧：让你在保留现场，服务不重启的情况下，执行我们的调试代码

    前言 这篇其实是对一年前的一篇文章的补坑. @Java Web 程序员,我们一起给程序开个后门吧:让你在保留现场,服务不重启的情况下,执行我们的调试代码 当时,就是在spring mvc应用里定义一个 ...

  7. python库-collections模块Counter类

    Counter类主要是用来跟踪值出现的次数.它是一个无序的容器类型,以字典的键值对形式存储,其中元素作为key,其计数作为value. demo: all_words = [] # 列表里面是汉字(可 ...

  8. Spring boot Sample 004之spring-boot-configuration-yaml

    一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 通过yaml文件配置spring boot 属性文件 三.步骤 3.1.点击File -> New Project - ...

  9. 从0开始探究vue-公共变量的管理

    背景 在Vue项目中,我们总会遇到一些公共数据的处理,如方法拦截,全局变量等,本文旨在解决这些问题 解决方案 事件总线 所谓事件总线,就是在当前的Vue实例之外,再创建一个Vue实例来专门进行变量传递 ...

  10. Java实现 LeetCode 714 买卖股票的最佳时机含手续费（动态规划 || 迭代法）

    714. 买卖股票的最佳时机含手续费 给定一个整数数组 prices,其中第 i 个元素代表了第 i 天的股票价格 :非负整数 fee 代表了交易股票的手续费用. 你可以无限次地完成交易,但是你每次交 ...