标签: keyframe

我需要在动画到达某个关键帧时调用方法.当动画到达某个关键帧时是否可以触发事件？如果没有,是否有更好的方法在某个时间触发事件？

我有所有必要的代码移动并通过C#代码单击鼠标,但我不想只将鼠标位置设置为X和Y; 那看起来很生涩.相反,我希望在Z秒内从一个点X1, Y1到另一个点平滑过渡X2, Y2.与keyframing类似.

我正在寻找类似于此的方法:

public void TransitionMouse(int x, int y, double durationInSecs)

它只是将顺利从当前位置移动鼠标,x并y在durationInSecs秒.我有一个叫做的函数:

public void MoveMouse(int x, int y)

这将鼠标移动到x,y马上.

编辑

谢谢你的帮助!这是完成的,经过测试的代码:

    [DllImport("user32.dll")]
    static extern bool SetCursorPos(int X, int Y);

    public void TransitionMouseTo(double x, double y, double durationSecs)
    {
        double frames = durationSecs*100;

        PointF vector = new PointF();
        PointF mousePos = Cursor.Position;

        vector.X = (float)((x - mousePos.X) / frames);
        vector.Y = …

我创建了一个简单的循环动画,它使用该translate函数左右移动元素.这在Chrome,Firefox和IE10中很好地运行,但是当动画反转元素跳转时.

我在CodePen上创建了一个问题的例子,只需在IE10中打开它:http://codepen.io/anon/full/cxtza (更新)

我试图通过硬编码关键帧0%,50%和100%而不是from/to使用alternate方向属性来缓解问题,我尝试使用translateX而不是3D,但到目前为止还没有运气.

更新:已报告该错误https://connect.microsoft.com/IE/feedback/details/785881/animated-transform-with-translate-and-percentage-value-jumps-ie10

所以我希望创造一个非常基本的雪效果.

我有一个关键帧动画,用于左右摇晃并沿Y轴向下移动的薄片.我希望元素使用转发保留结束值.但我还想循环播放动画(无限),以便它从中断的地方继续.

HTML:

<div>
  <figure class="small"></figure>
</div>

CSS:

div {
  width: 100%;
  height: 250px;
  background: #184254;
}

figure {
  border-radius: 50%;
}

@-webkit-keyframes snowfall {
  25% {
    transform: translateX(10px) translateY(20px);
      }
  75% {
    transform: translateX(-10px) translateY(30px);
  }
  100% {
    transform: translateX(0px) translateY(40px);
  }
}

.small {
  margin-left: 100px;
  width: 7px;
  height: 7px;
  background: #DFE9ED;
  -webkit-animation: snowfall 2s ease-in-out forwards infinite;
}

http://codepen.io/mildrenben/pen/PwZdXB

我对WPF很新,但我认为我需要做的事情相对简单.我需要创建一个图像"动画",我每隔0.25秒更换一个图像源.

我有一个名为"animation"的文件夹,图像为1到25 png live(名为1.png,2.png ... 25.png).每个图像都与我动画的不同帧相关联.

我想写xaml来将图像从1改为2,从2改为3,每隔0.25秒改变3到4等,直到它到达第25个图像,然后它应该循环回到开始.

我很可能需要写一些c#才能做到这一点.我希望它在可以与UI交互的线程上运行(如更新图像)但不阻止UI线程.

提前致谢!

当我导航到我的一个子页面时,我试图将CSS3动画显示为加载器动画.我在rotateY上使用关键帧动画.问题是在Firefox上,当导航到另一个页面时,动画确实有效,但它非常生涩和波涛汹涌.

在Chrome和Safari上,同样的动画可以顺利完美地运行.

这是一个小提琴:http: //jsfiddle.net/p6mgxpbo/

HTML:

<div class="gb-loading">
    <div id="animatedElem" class="pin-c">
        <div class='pin'></div>    
    </div>
    <div class="pin-mirror"></div>
    <div id="gb-lb" class="load-bounce"></div>
</div>

CSS:

.gb-loading {
        position: fixed;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        width: 70px;
        height: 70px;
        margin: auto;
        z-index: 101;
        margin-top: -100px;
    }
    .pin-c {
        width: 70px;
        height: 70px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;

        -webkit-animation: pulsate 1.5s linear infinite;
           -moz-animation: pulsate 1.5s linear infinite;
             -o-animation: pulsate 1.5s linear infinite;
                animation: pulsate 1.5s linear infinite;
    } …

我正在尝试重新创建负面摇晃动画,就像Strike在付款框中使用的那样,当有一些表单填充错误时.

我基本上复制了它动画关键帧,但在我的使用中,它的工作方式不同.

我的版本:

http://codepen.io/FelipeMartinin/pen/NGrXvR

条纹版本:

https://stripe.com/docs/checkout(点击"Pay with Card"按钮,点击"Pay"后不填写输入以查看动画)

如果你注意到,条纹动画有一个3D运动效果,在我的版本中,该框只能水平抖动.即使使用相同的关键帧.

按照关键帧下方进行操作

@keyframes panelShakeAnimation {
  0 {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
  }

  12.5% {
    -webkit-transform: translateX(-6px) rotateY(-5deg);
    -moz-transform: translateX(-6px) rotateY(-5deg);
    -ms-transform: translateX(-6px) rotateY(-5deg);
    -o-transform: translateX(-6px) rotateY(-5deg);
    transform: translateX(-6px) rotateY(-5deg)
  }

  37.5% {
    -webkit-transform: translateX(5px) rotateY(4deg);
    -moz-transform: translateX(5px) rotateY(4deg);
    -ms-transform: translateX(5px) rotateY(4deg);
    -o-transform: translateX(5px) rotateY(4deg);
    transform: translateX(5px) rotateY(4deg)
  }

  62.5% {
    -webkit-transform: translateX(-3px) rotateY(-2deg);
    -moz-transform: translateX(-3px) rotateY(-2deg);
    -ms-transform: translateX(-3px) rotateY(-2deg);
    -o-transform: translateX(-3px) rotateY(-2deg);
    transform: translateX(-3px) rotateY(-2deg) …

客户端已请求选框样式滚动文本横幅(是的)

曾经使用过css动画,但有一些我无法解决的怪癖.

https://jsfiddle.net/u2f6qdya/

问题是列表元素刚刚被"敲掉"并堆叠到最后一行.父母是绝对的,所以不确定为什么会发生这种情况.

下一个问题是关键帧,我希望项目从左侧开始,但是在它们完成动画关闭屏幕右侧之前再次开始进入并滚动.

CSS代码:

.sliding-marquee {
    width: 100%;
    height: 44px;
    background-color: #000;
    opacity: 0.6;
    color: white;
    line-height: 44px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.sliding-marquee ul {
    left: 0;
    top: 0;
    position: absolute;
    animation: marquee 20s linear infinite;
}

.sliding-marquee ul li {
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
}

.sliding-marquee ul li i {
    margin-right: 20px;
}

.sliding-marquee ul li + li {
    margin-left: 40px;
}

@keyframes marquee {
    0%   { left: -100% …

我不知道为什么当我设置animation: dash 10s linear forwards;它时会在4秒内完成.它是一个错误还是一个"功能",如果是这样,我怎么能让它持续10秒？

.stroke-container {
  transform: rotate(270deg);
  background: green;
  width: 120px;
  height: 120px;
}

.stroke-1 {
  stroke: red;
  animation: dash 10s linear forwards;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.stroke-1-bg {
  stroke: blue;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

svg {
  fill: none;
  stroke-width: 10px;
}

<svg class="stroke-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="stroke-1-bg" cx="60" cy="60" r="50"/>
    <circle class="stroke-1" cx="60" cy="60" r="50"/>
</svg>

我不知道如何表达这个问题。

所以这是一个例子。图层上的动画滑入视图，然后稍微弹回。十分简单。

位置关键帧看起来像这样：

关键帧 0：（-100,200） 关键帧 10：（100,200） 关键帧 15：（125,200） 关键帧 20：（100,200）

假设我想移动这一层，因为我不喜欢它垂直放置的位置。所以，我一直在选择每个关键帧 (0,10,15,20) 并手动将 Y 轴更改为任何数字。

有没有更简单的方法来做到这一点？我希望能够突出显示时间轴中的图层，[按某个按钮] + 拖动到我希望它在 Y 轴上的位置，然后关键帧会自行更新