很想知道我能够将以下内容实现webkit-animation到非webkit浏览器中,例如Firefox,Internet Explorer和Opera?编码是什么?
@-webkit-keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
.object {
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
}
Run Code Online (Sandbox Code Playgroud) 如果您访问我的网站:http://warringah- Plastics.com.au/w Plastics,当您将鼠标悬停在主导航中的菜单项上时,您会看到指示箭头显示在其顶部。然后,当您在菜单上从左到右移动鼠标时,CSS 过渡非常平滑。但是,当您从右向左移动时,过渡会突然越过菜单项,看起来不太好。目前我正在将此 CSS 应用于 nav li 元素:
过渡:所有 0.5 秒缓入缓出 0 秒!重要;
我尝试过使用悬停 CSS 进行实验,但没有成功。提前致谢!
我有这个加载屏幕脚本,我想在项目中实现.
但是它需要jQuery.由于页面中没有任何元素需要jQuery,我想节省一些空间并避免添加它.
有什么办法可以用纯JavaScript提供完全相同的功能吗?
HTML:
<body onload="hide_preloader();">
<div class="preloader"> <div class="loader"></div> </div>
</body>
Run Code Online (Sandbox Code Playgroud)
jQuery的:
jQuery(window).load(function() { rotate = 0; $(".preloader").fadeOut(250); });
Run Code Online (Sandbox Code Playgroud)
谢谢
CSS3如何工作?它是否在浏览器中使用JavaScript?因为过渡效果是JavaScript质量!CSS只是造型吗?
我知道我的问题有点奇怪 - 我的老师今天问我这个问题.
我的基本工作示例代码:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 0.25s ease 0s;
-moz-transition: all 0.25s ease 0s;
transition: all 0.25s ease 0s;
}
Run Code Online (Sandbox Code Playgroud)
如果我删除0转换前的持续时间并且s在转换延迟之后,则它不起作用:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all .25s ease 0;
-moz-transition: all .25s ease 0;
transition: all .25s ease 0;
}
Run Code Online (Sandbox Code Playgroud)
我问这个问题,因为我的转换正在使用后一个代码,但突然Chrome给了我错误"未知属性名称",我需要将其更改为以前的版本,以使我的转换再次工作.我怎么能解决这个问题,因为我有很多第二种格式的代码.