CSS3动画@keyframes中translate和scale混用出错问题






在写基于网页的2048时,想让一个元素出现时已经通过translate属性固定在指定位置,同时显示动画scale(0)-->scale(1),以实现放大出现效果。

CSS代码为

		@-webkit-keyframes mymove_failed{0%   {-webkit-transform:translate(50px,50px) scale(0);}100% {-webkit-transform:translate(50px,50px) scale(1);}}
但是效果却和预想的不一样,研究后发现,将translate和scale的顺序反过来写,即可实现预期的效果,如下:

		@-webkit-keyframes mymove_success{0%   {-webkit-transform:scale(0) translate(50px,50px);}100% {-webkit-transform:scale(1) translate(50px,50px);}}

结论:同时使用translate和scale时,应将scale放前面。

只测试了webkit内核的,其他内核未测试,不知道算不算一个BUG。


代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.success {width: 50px;height: 50px;background-color: #BBF7F7;-webkit-animation: mymove_success 1s;-webkit-animation-fill-mode: forwards;}.failed {width: 50px;height: 50px;background-color: #FF6F6F;-webkit-animation: mymove_failed 1s;-webkit-animation-fill-mode: forwards;}@-webkit-keyframes mymove_failed{0%   {-webkit-transform:translate(50px,50px) scale(0);}100% {-webkit-transform:translate(50px,50px) scale(1);}}@-webkit-keyframes mymove_success{0%   {-webkit-transform:scale(0) translate(50px,50px);}100% {-webkit-transform:scale(1) translate(50px,50px);}}</style>
</head>
<body><div class="success"></div><div class="failed"></div>
</body>
</html>


转载于:https://www.cnblogs.com/qs20199/p/4452275.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/273409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

metero学习

博客园首页新随笔联系订阅管理最新随笔 最新评论 node.js相关的中文文档及教程 (转) Posted on 2013-08-30 10:40 小小清清 阅读(61) 评论(0) 编辑 收藏 node.js api中英文对照: http://docs.cnodejs.net/cman/ node.js入门中文版: http://nodebeginner.org/index-zh-cn.html e…

Linux统计单个文件统计

语法&#xff1a;wc [选项] 文件… 说明&#xff1a;该命令统计给定文件中的字节数、字数、行数。如果没有给出文件名&#xff0c;则从标准输入读取。wc同时也给出所有指定文件的总统计数。字是由空格字符区分开的最大字符串。 该命令各选项含义如下&#xff1a; - c 统计字节数…

jQuery慢慢啃之事件对象(十一)

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) {alert( event.currentTarget this ); // true }); 2.event.data//当前执行的处理器被绑定的时候&#xff0c;包含可选的数据传递给jQuery.fn.bind。 $("a").ea…

Linuxcurl命令参数详解

Linuxcurl是通过url语法在命令行下上传或下载文件的工具软件&#xff0c;它支持http,https,ftp,ftps,telnet等多种协议&#xff0c;常被用来抓取网页和监控Web服务器状态。1.linuxcurl抓取网页&#xff1a;抓取百度&#xff1a;curlhttp://www.baidu.com如发现乱码&#xff0c;…

android解析XML总结(SAX、Pull、Dom三种方式)

在android开发中&#xff0c;经常用到去解析xml文件&#xff0c;常见的解析xml的方式有一下三种&#xff1a;SAX、Pull、Dom解析方式。 今天解析的xml示例&#xff08;channels.xml&#xff09;如下&#xff1a; 1 <?xml version"1.0" encoding"utf-8"…

查看Eclipse中的jar包的源代码:jd-gui.exe

前面搞了很久的使用JAD&#xff0c;各种下载插件&#xff0c;最后配置好了&#xff0c;还是不能用&#xff0c;不知道怎么回事&#xff0c; 想起一起用过的jd-gui.exe这个工具&#xff0c;是各种强大啊&#xff01;&#xff01;&#xff01; 只需要把jar包直接扔进去就可以了&a…

maven scope含义的说明

compile &#xff08;编译范围&#xff09; compile是默认的范围&#xff1b;如果没有提供一个范围&#xff0c;那该依赖的范围就是编译范围。编译范围依赖在所有的classpath 中可用&#xff0c;同时它们也会被打包。 provided &#xff08;已提供范围&#xff09; provided 依…

此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求...

FirFox打开80以外的端口&#xff0c;会弹出以下提示&#xff1a; “此地址使用了一个通常用于网络浏览以外的端口。出于安全原因&#xff0c;Firefox 取消了该请求。”。 解决方法如下&#xff1a; 在Firefox地址栏输入about:config,然后在右键新建一个字符串键network.securit…

Java操作shell脚本

public class Exec {private static ILogger logger LoggerFactory.getLogger(Exec.class);public Exec() {super();}/*** 执行命令&#xff08;如Shell脚本&#xff09;<br>* * param cmd 操作命令* param timeout 超时时间* return 命令执行过程输出内容* * throws IO…

Mysql更新插入

在向表中插入数据的时候&#xff0c;经常遇到这样的情况&#xff1a;1. 首先判断数据是否存在&#xff1b; 2. 如果不存在&#xff0c;则插入&#xff1b;3.如果存在&#xff0c;则更新。 在 SQL Server 中可以这样处理&#xff1a; if not exists (select 1 from t where id …

信息加密之信息摘要加密MD2、MD4、MD5

对于用户数据的保密一直是各个互联网企业头疼的事&#xff0c;那如何防止用户的个人信息泄露呢&#xff1f;今天为大家介绍一种最简单的加密方式--信息摘要算法MD。它如何来保护用户的个人信息呢&#xff1f;其实很简单&#xff0c;当获得到用户的信息后&#xff0c;先对其进行…

Java 从网络上下载文件

/*** 下载文件到本地 */public static void downloadPicture(String imageUrl, String filename){ URL url;try {url new URL(imageUrl);//打开网络输入流DataInputStream dis new DataInputStream(url.openStream());//建立一个新的文件FileOutputStream fos new FileOutp…

An error was encountered while running(Domain=LaunchSerivcesError, Code=0)

今天突然遇到这样一个错误&#xff0c;编译可以通过&#xff0c;但是运行就会弹出这个错误提示&#xff1a; An error was encountered while running(DomainLaunchSerivcesError, Code0) 解决办法就是重置模拟器。 点击模拟器菜单中的Reset Contents and Settings&#xff0c;…

hdu 4091 线性规划

分析转自&#xff1a;http://blog.csdn.net/dongdongzhang_/article/details/7955136 题意 &#xff1a; 背包能装体积为N, 有两种宝石&#xff0c; 数量无限&#xff0c; 不能切割。 分别为 size1 value 1 size2 value2 问背包能装最大的价值&#xff1f; 思路 &#xff…

linux fmt命令

简单的格式化文本 fmt [option] [file-list] fmt通过将所有非空白行的长度设置为几乎相同&#xff0c;来进行简单的文本格式化 参数 fmt从file-list中读取文件&#xff0c;并将其内容的格式化版本发送到标准输出。如果不制定文件名或者用连字符&#xff08;-&#xff09;来替代…

基于 jQuery支持移动触摸设备的Lightbox插件

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势&#xff0c;支持桌面电脑的键盘导航&#xff0c;并且支持视频的播放。 在线预览 源码下载 简要教程 Swipebox是一款支持桌面、移动触摸手机和平板电脑的jQuery Ligh…

简化工作——我的bat文件

重启adb(radb.bat)&#xff1a; echo off call adb kill-server call adb start-server call adb remount push 一个apk(push.bat) echo off if "%1""launcher" ( call adb push 相关apk路径 system/app )else ( echo 请添加一个参数!当前有效…

js操作数据库

<script languagejavascript> function replace(v) { //容错问题&#xff0c;请读者自行进行判断。 //定义SQL语句 var sql select * from Dictionary where MainID v ; //新建数据库连接对象和数据集存取对象 var ConnDB new ActiveXObject(adodb.connection)…

Java中StringBuilder的清空方法比較

StringBuilder 没有提供clear或empty方法。清空有3种方法&#xff1a;1&#xff09;新生成一个&#xff0c;旧的由系统自己主动回收2&#xff09;使用delete3&#xff09;使用setLength 将三种方法循环1000万次&#xff0c;代码&#xff1a; 1.public class sbbm { 2. 3. st…

LinkCutTree 总结

最近学习了LinkCutTree&#xff0c;总结一下。 LinkCutTree是一种数据结构&#xff08;是Tree Decomposition中的一种&#xff09;&#xff0c;她维护的一般是无向图&#xff08;一个森林&#xff09;&#xff0c;支持连边、删边、链修改、链查询&#xff08;点属于特殊的链&am…