问题描述：在小米手机上，animation-fill-mode设置为 both时，在手机上的web页面会超出屏幕宽度，出现滚动条。

解决方法：animation-fill-mode设为none。

.page

 position: absolute

 width: 100%

 opacity: 0
<div id="page1" class="page hide">

  </div>

<div id="page2" class="invite-record page fadeInRight animated show">

  </div>

css3 animation-fill-mode 对布局的影响的更多相关文章

  1. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  2. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  3. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  4. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  5. CSS3全览_最新布局

    CSS3全览_最新布局 目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiax ...

  6. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  7. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  8. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  9. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  10. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

随机推荐

  1. java第一天学习作业及答案

    作业一 一.选择题 1.选出在java中有效的注释声明(AD)(选两项) A.//这是注释 B.*/这是注释*/ C./这是注释 D./*这是注释*/ 2.在控制台运行一个java程序,使用的命名正确 ...

  2. tar命令的使用

    tar格式,会打包成一个文件,可以对多个目录,或者多个文件进行打包 tar命令只是打包,不会压缩,打包前后大小是一样的 tar命令 -c    //打包 -x    //解压 -f    //指定文件 ...

  3. iOS推送生成服务器端p12文件

    生成服务器端推送p12文件 所需文件:A.开发证书  aps_production.cer B.本地导出的私钥   : aps_production.p12 C.生成证书时用到的请求文件:Push.c ...

  4. PHP 删除文件(图片)

    /** * 删除图片或文件 * @author Zhenwei Zhang <772979140@qq.com> * @param string $pic 图片或文件地址 */functi ...

  5. cocostudio 骨骼动画 setContentScaleFactor

    最近在看骨骼动画,看上去挺容易的,但是照着例子做的时候却出现问题了,骨骼之间出现了很大的缝隙,找了很久才发现原来setContentScaleFactor的原因, 出现间隙,是因为各个骨骼是单独在做缩 ...

  6. Android Studio下SlidingMenu的导入与基础使用

    一.关于这个控件,其实我们现在很多app都在用,最简单的,你打开QQ,当看资料卡的时候,首先要侧拉一下,那个就是SlidingMenu 这几天查了很多资料,各种方法都试了,但是一直都没有成功,最后在一 ...

  7. runtime作用

    1.发送消息 方法调用的本质,就是让对象发送消息. objc_msgSend,只有对象才能发送消息,因此以objc开头. 使用消息机制前提,必须导入#import <objc/message.h ...

  8. Ruby中字符串与正则表达式的问题

    Ruby的正则表达式为Regexp类的对象 主要的元语言字符 記号 意味 例 説明 ^ 行頭 /^abc/ abcで始まる行 $ 行末 /abc$/ abcで終わる行 . 任意の1文字 /a.b/ a ...

  9. MSSQL如何在没有主键的表中删除重复数据

    为了对重复数据进行实验,下面建一个设计不太好(没有主键)表并插入了一些重复数据: create database testdb use testdb ; go create table DupsNoP ...

  10. 本地计算机 上的 OracleOraDb11g_home1TNSListener 服务启动后停止

    今天玩oracle的时候突然遇到一个问题:本地计算机 上的 OracleOraDb11g_home1TNSListener 服务启动后停止.某些服务在未由其他服务或程序使用时将自动停止. 在网上找解决 ...