标签: css-animations

我目前在Safari上遇到一个非常令人沮丧的错误,我不知道还有什么地方可以转.

似乎触发事件的大多数元素(但不是全部,我无法辨别差异因素)focus将导致页面上所有转换或动画的元素跳转到顶部和左侧〜2px.这只发生在页面加载后的第一个焦点事件上.

看到这个bug有点烦人,因为它位于droplr.com的登录部分,而且我完全无法在JSFiddle上提取更简单的案例.

如果您有/创建帐户并登录,请单击此编辑图标以获取删除:

你会看到在页面的第一个焦点,事情抖动.这是时间线,当页面上有一个单一的下降,我触发焦点在一个有问题的元素:

随着更多的下降,它只是更多相同,但似乎最多约40个油漆.而探查者并没有暗示任何邪恶的东西.只是通过jQuery内部之旅.

如果不是通过translate3d或者放置元素matix3d,我只是使用top和left,这个bug消失了.经过几个小时的调试,我完全失去了.

希望有人看到类似的东西,可以看看,或者可以给我关于调试后续步骤的建议.

非常感谢!

更新:戴夫Desandro 建议这是3D加速,所以我用一个translate相反的尝试,但果然,这不会导致抖动.我不知道为什么硬件加速会focus发生事件,但只有一次.

我已经尝试在页面加载时将transformZ设置为0以继续并提升硬件,但也没有运气.欢迎任何更多的想法.

我有一组动画,我一个接一个排队,以创建一个更大的整体动画.为了简单起见,我创建了一个简单的小提示来演示我的意思,但它是我想要实现的简化版本(代码在底部)...

http://jsfiddle.net/UnsungHero97/qgvrs/5/

我想要做的是将所有这些组合成一个动画而不是几个动画.目前,我添加了一个类来触发动画的不同阶段,但我希望做的是添加一个类只有一次启动动画,然后它会才行.

我不知道如何将动画组合成一个,因为它们可以处理不同的元素.我仍然是CSS3动画的新手,所以有可能这样做吗？

有什么想法吗？

代码

HTML

<div class="outside">
    <div class="inside"></div>
</div>

CSS

.outside {
    border: 1px solid magenta;
    height: 100px;
    width: 100px;
    position: relative;
}

.inside {
    border: 1px solid skyblue;
    height: 60px;
    width: 60px;
    margin-top: -31px;
    margin-left: -31px;
    position: absolute;
    top: 50%;
    left: 50%;
}

@-webkit-keyframes scale-in {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(.8);
  }
  50% {
    -webkit-transform: scale(1); …

按照这个主题:

Firefox 38-40 SMIL问题 - 速度非常慢(从1999年9月22日起在FF版本41中解决)

和这个主题:

意图弃用:SMIL

SVG标记'animateTransform'效果不佳.用CSS或CSS转换替换SMIL(animate标签)会很不错.

CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.

下一个Google Chrome警告:

CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated 
and will be removed. Please use CSS animations or Web animations instead.

修订版196823:添加SMIL弃用警告

首先,我需要实现三件事:

1)鼠标悬停效果(最简单)

它怎么样:

<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
    <!--it makes half-visible selecting effect -->
    <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
    <!-- explicitly reverse the …

我正在我的页面上使用CSS动画,并且当动画正在运行时,Safari似乎会在页面上的其他位置更改不相关的字体粗细.知道为什么会这样吗？所有其他浏览器都运行正常,包括像Chrome这样的webkit.

我在这里详细介绍了视频中的错误 - http://www.screenr.com/gZN8

该网站也在这里 - http://airport-r7.appspot.com/但它可能会继续快速变化.

我在箭头图标上使用指南针(@ transition-property,@ transition-duration).在闪烁的标题上没有应用过渡.在Mac上 - 所以它可能是硬件加速,但我仍然试图解决它.

假设你试图为这样的tilable背景设置动画:

.container {
  width: 160px;
  height: 91px;
}
.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}

<div class="container">
  <textarea class="bg"></textarea>
</div>

只要更改容器的尺寸,循环动画就会中断!

有没有办法让没有JS的响应？

为什么这不起作用？我究竟做错了什么？

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

DEMO

http://jsfiddle.net/hAGKv/

提前致谢!

我尝试了很多次迭代,但它似乎并不想留在最后一个关键帧上.

我不知道我在这里做错了什么.

<style>
#container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}
#centerhex{
background-image:url(http://i.imgur.com/4sZDtfK.png);
background-repeat:no-repeat;
background-position:center; 
height:224px;
width:210px;
position:absolute;
margin-left: -105px;
margin-top: -112px;
top:50%;
left:50%;
}   
.fadein{    
animation:fadein 1.5s;
animation-timing-function:linear;
animation-delay:1s;
animation-fill-mode:forwards, none
animation-iteration-count: 1
-webkit-animation-iteration-count: 1
-webkit-animation:fadein 1.5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards, none
}
.transtart{
opacity:0
}
@-webkit-keyframes fadein { 
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;} 
}
@keyframes fadein {
0%{opacity:0;}
50%{opacity:1;}
60%{opacity:1;}
100%{opacity:0.2;} 
}
</style>
</head>
<body>

<div id="container">
<div class="fadein transtart">
    <div id="centerhex"></div>
</div>
</div>

动画填充应该照顾它,但由于某种原因它不是.任何帮助将不胜感激.

我有一个圆SVG动画的进度条,其中stroke-dashoffset从动画0,radius到radius,0(0%至100%).

圆周长度的等式是pi * d.有没有办法使用CSS calc函数,它可以使用pi的值,而不只是一个舍入值(如3.14)？

我正在尝试用文本加载动画CSS.我所拥有的是一个黑色的文本,然后当页面加载文本将填充开始填充红色几秒钟.

我面临的问题是文本加载动画工作正常,但是当文本结束并以新行开头时,动画文本仍然在同一行上继续.

我怎样才能解决这个问题？

码:

    body {
    background: #3498db;
    font-family: sans-serif;
    }
    h1 {
        position: relative;
        color: rgba(0, 0, 0, .3);
        font-size: 5em;
        white-space: wrap;
    }
    h1:before {
        content: attr(data-text);
        position: absolute;
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        word-break: break-all;
        color: #fff;
        animation: loading 8s linear;
    }
    @keyframes loading {
        0% {
            max-width: 0;
        }
    }

<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>

我正在尝试使用angular2的动画,我想知道它们对标准css动画/过渡有什么特别的优势.

例如,典型的材料设计卡和悬停效果与框阴影.大多数css框架使用:hover和css-transitions.使用角度2动画有特别的优势吗？

我在某处读到某些css动画属性并没有调用GPU那么多,因此有一些延迟和滞后.angular2动画怎么样？