标签: keyframe

我已经试过了

$prefixes: ("-webkit-","-moz-", "-o-", "");
@mixin keyframes($name) {
    @each $prefix in $prefixes {
        @#{$prefix}keyframes #{$name} { @content; }
    }
}

和

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

任何方式这样做？无法找到与谷歌的任何解决方案:(

我想要完成的是图像悬停时的短高斯模糊动画.有点像将焦点设置在相机上.(聚焦模糊-聚焦).

这是我到目前为止所得到的:

@-webkit-keyframes image_blur {
    0% { -webkit-filter: blur(0px);}
    50%; { -webkit-filter: blur(5px);}
    100% { -webkit-filter: blur(0px);}
}

#image {
    width    : 290px;
    height   : 160px;
    background: url(images/test1.jpg);
}

#image:hover {
    -webkit-animation: image_blur 2s; 
}

好像似乎没有工作..有什么建议吗？
提前致谢.

我正在尝试使用 CSS3 关键帧动画，当悬停在一个对象上时，会导致动画在另一个对象上触发。现在我只有一个简单的关键帧：

  @keyframes fill
  {
    from   {background: red; height: 0px; width: 0px;;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-moz-keyframes fill /* Firefox */
  {
    from   {background: red; height: 0px; width: 0px;}
    to {background: green; height: 150px; width: 150px;}
  }

  @-webkit-keyframes fill /* Safari and Chrome */
  {
    from   {background: red; height:0px; width:0px;}
    to {background: green; height: 150px; width: 150px;}
  }

html如下：

<div class="box1">
    <div class="box2"></div>
</div>

如果我的样式表将动画属性应用于 .box1，它实际上可以为 .box2 设置动画吗？

在JavaScript中,很容易获得应用于元素的CSS动画的名称和属性:

var animName = element.style.webkitAnimationName;
// element.style.mozAnimationName
// etc...

但有没有办法读出甚至更改动画的CSS关键帧？

我试图在页面的中心设置一个div来制作动画而不会四处移动.div应该在旋转(无限)时向上和向下缩放,同时它位于页面中心的一个位置.它在Firefox和Chrome中做得很好,但在IE11中,div从页面顶部开始,然后动画到需要的位置.动画完成后,div会跳回到顶部并重新开始.

这是演示这个的JSFiddle.请在Chrome和IE中查看,以查看对比度.

这是代码:

@keyframes logosplash {
      0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);}
     50% {transform: translateY(50vh) scale(1) rotateZ(135deg);}
    100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);}
}
.logoSplash {
    animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
    -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.logo {
    position: fixed;
    width: 13.5vw;
    height: 13.5vw;
    left: 50%;
    margin-top: calc(-6.75vw - 5px);
    margin-left: calc(-6.75vw - 5px);
    box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000;
    border-radius: 25px;
    border: 5px solid #fff;
    transform: translateY(50vh) scale(0.6) …

我正在尝试创建一个预加载器，它可以改变它的高度、宽度、边界半径和背景颜色。小提琴：https : //jsfiddle.net/Altair827/ww077qby/4/

@keyframes colorIt{
  from{
background-color: violet;
  }
  to 20%,40%,60%,80%,90%,99%{

  }
  20%{
     background-color: indigo;
     height:40px;
     width:40px;
     border-radius:20px;
  }
  40%{
     background-color: blue;
     height:50px;
     width:50px;
     border-radius:25px;
  }
  60%{
     background-color: green;
     height:60px;
     width:60px;
     border-radius:30px;
 }
 80%{
    background-color: yellow;
    height:70px;
    width:70px;
    border-radius:35px;
 }
 90%{
    background-color: orange;
    height:80px;
    width:80px;
     border-radius:40px;
  }
  99%{
    background-color: red;
    height:20px;
    width:20px;
    border-radius:10px;
  }
}

动画有效，但在更改之间有一个暂停。如何让动画更流畅？

我有两种类型的元素，我们称它们为.a和.b。

他们可能在上面设置了一些CSS动画。我无法控制这些关键帧，是否已设置关键帧，无法设置动画。

他们可能在做动画opacity。不过，我想在opacity我的.a元素要留一定的价值，让我们说1，不管它是否为动画与否。

考虑以下代码，其中有三种情况：

1. 我的元素上没有设置动画
2. 有动画，但不是动画 opacity
3. 有一个动画，opacity并且在被动画的属性中

div {
  /* some dummy styles so we can see stuff */
  display: inline-block;
  width: 5em; height: 5em;
  background: purple;
}

[class*='ani'] { animation: a 1s ease-out infinite alternate }

.ani--one { animation-name: ani-one }

@keyframes ani-one { to { transform: scale(.5) } }

.ani--two { animation-name: ani-two }

@keyframes ani-two {
  to {
    opacity: 0;
    background: orange; …

今天早些时候，我发布了一个关于按编码顺序使用关键帧进行帧提取的问题（此处），我尝试运行答案之一中提供的命令，但 ffmpeg 返回：

Unrecognized option 'frame_pts'.

分割参数列表时出错：未找到选项

有任何线索如何使 ffmpeg 识别“frame_pts”选项吗？我运行的完整命令是：

ffmpeg -i input.mp4 "select='eq(pict_type\,I)" -vsync 0 -frame_pts 1 thumbnails-%02d-I.png

我在用着

#progressBar{
   background-color: #247BA0;
   width: 150px;
   padding: 10px;
   border-radius: 5px;
   animation: progressBar 3s ease;
   animation-fill-mode:both; 
   text-align: center;
   box-sizing: content-box;
} 

和

@keyframes progressBar {
 0% { width: 0; }
100% { width: 280px; }
}

我想改变@keyframe使用JS变量的宽度数。我怎样才能做到这一点（没有 jQuery）？

删除此行后，单击 Home / X 按钮后如何重新启动动画？

void theBody.offsetWidth;

正如您在代码片段或 jsfiddle 中看到的，目前它的工作原理是，单击X后，会出现一个动画。

https://jsfiddle.net/hdycz159/

我怎样才能使用 CSS 替换 javascript 来做到这一点？

我会删除这一行：void theBody.offsetWidth;

我希望代码可以从代码中删除 void 行：void theBody.offsetWidth;

而且它必须是一种不使用的方式setTimeout

javascript

function showHome() {
    const theActive = document.querySelector(".with-curtain.active");
    const theHides = document.querySelectorAll(".hide");
    const theBody = document.querySelector("body");
    theActive.classList.remove("active");
    theHides.forEach(function (removeHide) {
        removeHide.classList.remove("hide");
    });

    theBody.classList.remove("fade");
    void theBody.offsetWidth; //restart animation
    theBody.classList.add("fade");
}

CSS

body {
  background: #353198;
}

.fade{
  animation: fade 2s ease forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% { …