标签: css-animations

我需要使用关键帧动画来移动精灵表的背景位置.但是,我不想要动画,我想要一帧一帧的硬框架,类似于gif.

任何想法如何实现这一目标？

非常感谢!

我有这个CSS动画,我试图根据添加到DOM节点的类来反转动画.我尝试了很多东西,但没有用.这是我正在使用的代码,见下文:

例

    // Closed state
    @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
    @-webkit-keyframes spin-close { 100% {  -webkit-transform: rotate(-0deg); } }
    @keyframes spin-close { 100% { transform:rotate(-0deg); } }

    // Open state
    @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
    @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
    @keyframes spin-open { 100% { transform:rotate(-90deg); } }

我不知道我是否看错了？请指教(一个演示会很棒).

我想一个关键帧动画添加到一个vaadin Label组件:背景应该从使彩色过渡red到yellow.

但是bg颜色不会以任何方式改变.我错过了什么吗？

private Label label = new Label("background red fading");
lable.setCss("red");

CSS:

.v-label-red {
    @include red;
}

关键帧:

@-webkit-keyframes red {
    from {background: red;}
    to {background: yellow;}
}
@keyframes red {
    from {background: red;}
    to {background: yellow;}
}

我正在使用bootstrap通用offcanvas工作正常.但是,sidebar当屏幕宽度超过768px时,我希望扩展折叠,同时在两个屏幕上使用css3同步动画div.我想要css only方法来做这个,如果css不工作,那么jquery也没关系.

这是我到目前为止尝试的,这是一个全屏视图.

因为我用width: 0;和height: 0;为#sidebarDIV,它不是很好的动画.使用现有的offcanvas方法有没有办法这样做？我不想更改HTML标记.

HTML

<!-- Navbar Tag Removed to reduce space -->
<!-- /.navbar -->
<div class="container">
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-8 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <h4>Menu</h4>
            <!-- Content Removed -->
        </div>
        <!--/span-->
        <div class="col-xs-12 col-sm-9 col-main">
            <p>
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle
                    nav</button>
            </p>
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of …

我正在尝试使用css动画围绕圆形图像创建"脉动环"动画.

我的图片是一个圆圈,宽400像素.我设法让整个图像脉冲,但我不太确定如何创建和动画图像周围的sepatate脉动环.

我想成像是静止的,环绕着它旋转.

我的代码到目前为止;

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png"></div>

CSS

.container {
  padding: 20px;
}

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

.pulse {
  -webkit-animation-name: 'pulse_animation';
  -webkit-animation-duration: 3000ms;
  -webkit-transform-origin: 70% 70%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: …

我有一个CSS关键帧动画，它本身非常普通。但是，我希望能够强制动画处于特定帧。 类似的东西anim.setProgress(0.13)，它将动画设置为13％。 我怎样才能做到这一点？

请注意，我不只是想在任意点开始动画。我希望能够中断它并说“回到32％”之类的值，而不管动画沿多远。

这是小提琴，下面是CSS代码（HTML只是SVG椭圆）。它适用于Chrome，Firefox和Opera，但不适用于IE和Edge。如何在IE和Edge中查看动画？

#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 500;
  -moz-animation: draw-first-shape 1s forwards 3;
  -webkit-animation: draw-first-shape 1s forwards 3;
  animation: draw-first-shape 1s forwards 3;
}

@-moz-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

在没有任何明显的闪烁和任何奇怪的情况下实现这一目标的最佳方法是什么？

开始的小提琴:http://jsfiddle.net/35qec14b/2/

$('.element').on('click', function(e){
  this.remove();
});

.element {
  position:relative;
  width: 200px;
  margin:5px;
  padding:20px;
  cursor:pointer;
  background: rgb(150,200,250);
  transition:1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">Element 1</div>
<div class="element">Element 2<br>Second line</div>
<div class="element">Element 3</div>
<div class="element">Element 4<br>Second line</div>
<div class="element">Element 5</div>

注意:在这种情况下,删除的元素必须立即消失,因为它会出现在另一个位置,我们不希望它同时在两个地方可见.

目前为止的想法:

• transform:translateY表示已移除的元素下面的所有元素(可能是大型列表的性能密集型)
• 动画/变换下面第一个元素的边距,从被移除元素的高度变为0(利用链式动画？步骤开始？)
• 用透明占位符替换已删除的元素,并将其自身高度设置为0

到目前为止，这是我的脚本：

HTML：

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

<body>
    <div id="test"></div>
</body>

</html>

CSS：

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

但是，如何使用某些JavaScript在CSS #div上播放CSS动画（关键帧）？

我想用某种动画删除该行.问题是当我将宽度设置为0然后它也改变了它的位置.这不应该发生.

该线应从起点移动到终点而不改变其位置.

$('button').click(function(){
$('.main').toggleClass('remove')
})

.line{
  width:60px;
  height:2px;
  background:#000;
  transform: rotate(30deg);
  position:absolute;
  top:20px;
  z-index:1;
  transition: all 0.3s ease-in-out;
}

.remove .line{
  width:0
}
.main{
  position:relative;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  position:relative;
  left:8px;
  top:2px
}

button{
  margin-top:60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="line"></div>
<span></span>
</div>

<button>toggle</button>

小提琴