标签: css-animations

（显然使用 React + Gatsby）我有一个汉堡包按钮，可以在我的网站中打开导航菜单。我想知道如何使用 Framer Motion 打开带有动画的菜单。

我正在努力寻找普通JavaScript 中允许我设置animation-fill-mode. 我正在使用该Element.animate(animation, timing)功能来实现此目的。

我尝试添加animation-fill-mode到对象的条目timing，但根据我的测试，它不是有效的参数。我还尝试使用Animation.onfinish和Animation.pause()串联来在完成时暂停它，但这也不起作用。这是它使用的所有代码：

const quotemove = [
    { transform: "translate(0vw) rotate(0deg)" },
    { transform: "translate(80vw) rotate(180deg)" }
]

const quotetiming = {
    duration: 1000,
    iterations: 1,
    // this is where i attempted to add fill mode    
}

const quoteholders = document.getElementsByClassName("quote")
for(let i = 0; i < quoteholders.length; i++) {
    let quoteholder = quoteholders.item(i)
    const quotemark = quoteholder.querySelector(".quotationmark")
    quoteholder.addEventListener("mouseover", () => {
        let animation …

我有两个背景:

body {
    background-image: url(img/nemo.png),url(img/ocean.png);
}

如何nemo.png background从左右无限移动但不影响ocean.png background？

编辑:当他到达最右边(并且图像不再可见)时,他将再次从左边缘出现并开始从左到右进行漂移.

我的动画@keyframes在IE中不起作用.在网上各种消息来源说IE9支持它,有些人说它不受支持.有人确切知道我应该停止朝这个方向努力......如果没有,@-ms-keyframes我认为它是IE的前缀...谢谢!

@-webkit-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;}
  52% {left: -940px; opacity: 1;}
  100% {left: 0px;}
}

@-webkit-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-moz-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;}
  52% {left: -940px; opacity: 1;}
  100% {left: 0px;}
}

@-moz-keyframes backup {
  0% {left: …

以下是jsfiddle.net示例:

http://jsfiddle.net/PGa2H/

CSS

@keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 15px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 15px green; }
}

.blink {
    -webkit-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}

• Box shadow动画适用于Chrome

• 在Firefox中不起作用

问题

• 哪些CSS3属性可以动画？

• 这是指定的？

• 如果Firefox存在问题,是否有参考

我刚刚为我的代码添加了"动画延迟",以便内容仅在5秒后从屏幕外滑动.但是,我发现正在移动的内容在"延迟"运行时显示在"最终"位置,然后在5秒后内容从左侧滑入(根据需要).

有没有人知道我如何调整我的代码,以便最终位置最初不会显示内容？这是我的代码的精简版:

<style>
div { 
width:100px;
height:100px;
background-color:red;

-webkit-animation: slideFromLeft 3500ms ease-out;
    -moz-animation: slideFromLeft 3500ms ease-out;
    -ms-animation: slideFromLeft 3500ms ease-out;

animation-delay:5s;
    -webkit-animation-delay:5s; /* Safari and Chrome */
}


@-webkit-keyframes slideFromLeft {
            from {
                opacity: 1;
                -webkit-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -webkit-transform: translateX(0%);
            }
        }
        @-moz-keyframes slideFromLeft {
            from {
                opacity: 1;
                -moz-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -moz-transform: translateX(0%);
            }
        }
        @-ms-keyframes slideFromLeft {
            from {
                opacity: 1;
                -ms-transform: translateX(-100%);
            }
            to {
                opacity: 1;
                -ms-transform: translateX(0%); …

我制作了一个幻灯片,它通过在幻灯片放映容器中将三个内嵌块彼此相邻(所有具有相同的背景图像)并使用translateX将该容器移动到左/右33%的方式来工作.循环.三个内联块几乎可以确保它看起来始终是连续的,并且您永远不会在每个屏幕上看到一个接缝.

幻灯片放置在另一个自己的容器中,典型宽度和溢出:隐藏用于裁剪长照片条并防止它拉伸浏览器窗口.

#container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slideshow {
    position: absolute;
    z-index: 5;
    top: 0;
    width: auto;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    height: 100%;
}

#about-slideshow {
    right: 0;
    -webkit-animation: slideshow-right 10s linear infinite;
    animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
    width: 964px;
    background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
    background-size: 101%;
}

/* the animation */
@-webkit-keyframes slideshow-right {
    from {
        -webkit-transform: translateX(0);
    }
    to { 
        -webkit-transform: …

出于某种原因,当我将鼠标悬停在div上时,边框会正常动画,但是将其移除会产生转换.我错过了什么？

http://codepen.io/anon/pen/XbPbvr

HTML:

<div class="test">
  Test
</div>

减:

.test {
  background: #eee;
  border-bottom: none;
  width: 300px;
  height: 300px;
  transition: border 100ms ease-out;

  &:hover {
    border-bottom: 5px solid black;
    transition: border 100ms ease-out;
  }
}

我有两个动画:元素加载和悬停:

div {
     animation: slide-up 2s;
    -webkit-animation: slide-up 2s;
    -moz-animation: slide-up 2s;
}
div:hover{
    animation: rotate 2s;
   -webkit-animation: rotate 2s;
   -moz-animation: rotate 2s;
}

该slide-up动画一旦元素被加载运行,并且rotate运行时,元素徘徊.但是,现在元素在鼠标离开时滑动,我不知道如何防止这种情况.所以我想slide-up在悬停时关闭动画.

旋转动画使用transform属性,向上滑动只是更改margins.

我有一个div,它应该只在悬停时出现.但是当我加载页面时动画也出现了.我希望隐藏动画div,直到我将鼠标悬停在另一个div上.有没有办法阻止加载页面时动画运行？

这是CSS:

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;

  animation: fadeout 1s;
  animation-fill-mode: forwards;
}

#dim:hover{
  animation: fadein 1s;
  animation-fill-mode: forwards; 
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

这是一个CodePen:https://codepen.io/Martin36/pen/gWwmZO