当你无限期地悬停它时,我有一个旋转的元素.当您将鼠标悬停时,动画将停止.简单:
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
但是当你徘徊时,动画会突然停止,恢复到0度.我想动画回到那个位置,但是我在编写语法时遇到了一些麻烦.
任何输入都会很棒!
我正在使用-webkit-background-clip将背景图像限制为h2元素中的文本.
我的问题是,-moz-background-clip功能是否一样？这似乎只适用于webkit浏览器,这表明它在Firefox中不起作用:
#header h1 a{
background: url(img/logo-overlay.png) no-repeat #000;
-moz-background-clip: text; -webkit-background-clip: text;
color: transparent; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-decoration: none;
}
目前,在Firefox中,文本被隐藏(由于颜色:透明和文本填充颜色:透明属性),并且只有背景图像和颜色在元素的矩形形状中可见.
有任何想法吗？
首先,小提琴:http://jsfiddle.net/AATLz/
这里的本质是使用-webkit-transition-delay排队的一组动画.第一个元素是0.4s,第二个是0.8s,第三个是1.4s等.默认情况下,它们排在第一位,当父级具有"扩展"类(用该按钮切换)时,它首先排在最后.
这意味着添加'.expanded'时的动画会逐个输出框,而当删除类时则相反.
那是花花公子.当课程在动画中期切换时,问题就开始出现了.如果您在第二个框动画后切换,那么在它们开始动画之前会有一段延迟,因为有几个延迟计时器正在等待.
延迟在这里显然有点笨拙.
我想到的两个选择是1)CSS关键帧动画,我不完全确定如何连续激活多个元素,2),JS控制时序 - 使用像jQuery Transit这样的东西.我不确定哪个更有能力/优雅,或者我错过了另一种选择.
任何输入都会很棒!
我想使用CSS:hover伪类来控制悬停下拉列表.那已经完成了.然而,棘手的部分是动画下拉动画.我不希望依靠jQuery来使菜单显示在所有,它应该与JS关闭完美地工作(虽然没有动画渐变).有没有办法'挂钩'进入CSS:悬停,而是运行一些jQuery(淡入菜单,然后徘徊),如果JS打开？