本次项目中动画放大缩小代码小结

.fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infinite; -o-animation: myfirst 1s infinite; animation: myfirst 1s infinite;}

@keyframes myfirst{

0% { transform: scale(.8); }

50% { transform: scale(1); }

100% { transform: scale(.8); }

}

@-moz-keyframes myfirst{

0%	{-moz-transform: scale(.8);}

50%	{-moz-transform: scale(1);}

100%	{-moz-transform: scale(.8);}

}

@-webkit-keyframes myfirst{

0%	{-webkit-transform: scale(.8);}

50%	{-webkit-transform: scale(1);}

100%	{-webkit-transform: scale(.8);}

}

@-o-keyframes myfirst{

0%	{-o-transform: scale(.8);}

50%	{-o-transform: scale(1);}

100%	{-o-transform: scale(.8);}

}

　　参考代码：

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation:mymove 5s infinite;

 -moz-animation:mymove 5s infinite; /* Firefox */

 -webkit-animation:mymove 5s infinite; /* Safari and Chrome */

 -o-animation:mymove 5s infinite; /* Opera */

 }

 @keyframes mymove

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-moz-keyframes mymove /* Firefox */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-webkit-keyframes mymove /* Safari and Chrome */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 @-o-keyframes mymove /* Opera */

 {

 0%   {top:0px; left:0px; background:red;}

 25%  {top:0px; left:100px; background:blue;}

 50%  {top:100px; left:100px; background:yellow;}

 75%  {top:100px; left:0px; background:green;}

 100% {top:0px; left:0px; background:red;}

 }

 </style>

 </head>

 <body>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 <div></div>

 </body>

 </html>

keyframes 放大缩小动画的更多相关文章

  1. CSS3实现放大缩小动画

    HTML <div> <div style="height: 35px;width:300px;background:orangered;border-radius: 4p ...

  2. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  3. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  5. css3 放大缩小代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

  7. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  8. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  9. Android多点触控技术，实现对图片的放大缩小平移，惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

随机推荐

  1. 如何利用fastjson将JSON格式的字符串转换为Map，再返回至前端成为js对象

    //注意,这里的jsonStr是json格式的字符串,里面如果遇到双引号嵌套双引号的,一般是嵌套的双引号经过转义 //    \",假如有这样的一个场景,这些字符串里面有需要的css样式的j ...

  2. ES6和ES5中的this指向问题

    不多逼逼 直接上代码: var name = "window"; var obj = { name: 'obj', //普通函数 one: function(){ console. ...

  3. ubuntu 16.04安装后不能登入

    启动后,选择ubuntu高级选项,选择恢复模式,在恢复模式下 sudo apt-get update sudo apt-get upgrade 另外,可以在此模式下,选择nvidia驱动

  4. opensuse13.2安装 sass和compass

    首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framewo ...

  5. 远程登陆服务器（window系统）

    1,打开命令输入框: 快捷键:win+R 2.输入命令:mstsc 3.输入你的IP地址和用户名(一般为administrator) 4.输入密码

  6. spring 类注入失败，解决之道

    1.今天偶尔发现的问题,如果你在一个类上面用了注解@Async,spring的异步注解之后,发现如果别的类用@Autowired导入这个类时会失败! 解决办法:用了@Async无非是想方便的用异步操作 ...

  7. 如何绘制ER图

    先画出多个实体(用长方形表示),然后是联系类型(菱形),和属性(椭圆).

  8. Vue.js - Day4

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>   // 创建 Vue 实例,得到 ViewModel   var vm ...

  9. Quartz Cron表达式的二三事

    最近在解决产品上的一个需求,就是定期生成报告(Report),我们叫做Scheduled Report. 原理:UI获取用户输入的时间信息,后台使用Spring框架设置定时任务,这里定时任务用的就是  ...

  10. IplImage转为Mat的方法

    IplImage* S_change_out; Mat matimg; matimg=cvarrToMat(S_change_out);