标签: css-animations

我试图结合2个淡入淡出的CSS3动画.谁能帮我这个？
这是我到目前为止 -

的jsfiddle

我发现了" http://thegoodman.cc/ ".这是一个绝对惊人的网站.

我真的很好奇,关于这个文档的主体是如何略微淡入,并在这个页面中向上滑动:

http://thegoodman.cc/about/

我希望两个图像相互重叠,背面的动画图像和静态图像重叠.没有动画,它可以正常工作,红色与黑色图像重叠.

一旦我添加了css动画,它就会忽略z-index集,黑色与红色重叠.如何将红色图像置于正面？

我有一个使用CSS背景的工作解决方案,但我希望图像能够响应

这是一个小提琴

http://jsfiddle.net/52VtD/7992/

在这里

.rotate{
z-index: 1;
-webkit-animation:rotation 20s linear infinite;
-o-animation:rotation 20s infinite linear;
-moz-animation:rotation 20s infinite linear;
animation:rotation 20s infinite linear;overflow:visible;}
@keyframes  rotation{0%{}100%{transform:rotate(-360deg);}}@-moz-keyframes  rotation
{
0%   {}
100% {transform: rotate(-360deg);}}
@-webkit-keyframes  rotation 
{
0%   {}
100% {-webkit-transform: rotate(-360deg);}
}
@-o-keyframes  rotation
{
0%   {}
100% {-webkit-transform: rotate(-360deg);}
}

.static {
    z-index:10;
    margin-top: -232px;
}

你好我试图动画一个元素,使它旋转7次然后减速和缓解我完成旋转我只需要缓解它.我正在使用from和to keyframe来旋转它,我需要逐帧进行还是有另一种方式？

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.spin.animated {
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: 7;
    animation-timing-function: linear;
}

我的动画效果非常好,但它似乎滑了,似乎没有滚动.可能是什么问题呢？

FIDDLE在这里:http://jsfiddle.net/erkoda3m/2/

img {
  height: 150px;
  width: 150px;
  animation: roll 4s linear infinite;
  -webkit-animation: roll 4s linear infinite;
}
@-webkit-keyframes roll {
  0% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateX(300px) rotate(360deg);
  }
  100% {
    -webkit-transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(300px) rotate(360deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

<img src="http://i.imgur.com/5NvOwB5.png">

我想问一下,因为每个浏览器都有动画前缀,那么开发人员为什么要写一个没有任何前缀的属性.看看这个来自w3schools.com的例子:

div {
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5);
}

为什么第二个最后一行存在？

我有这个示例代码http://codepen.io/anon/pen/yaZopZ(下面的相关片段),当您单击按钮时,模态元素应该通过在屏幕中心打开并从它的全尺寸没什么.但是,它会在动画开头的右下方打开,然后在屏幕中央结束.我需要更改为该代码以使其按预期工作？

当您单击图像时,它应该与http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image中的动画类似.但与该示例不同,我的示例在您在后台单击并需要保留该功能时关闭模式.

这是动画的一部分

@keyframes animatezoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

这就是动画

.modal {
  display: block;
  width: 600px;
  max-width: 100%;
  height: 400px;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  animation: animatezoom 0.3s;
}

如果问题不在这里,其余的代码在我上面发布的codepen中(http://codepen.io/anon/pen/yaZopZ).

如何隐藏元素并使其过渡？

例:

我想动画一个<div>有display: none; height: 0px; transition: height 600ms;.

所以点击我添加一个类display: block; height: 100px;.

高度没有动画.

CodePen

我更喜欢使用的解决方案transition,但如果没有,我可以使用animation.我不是在寻找任何使用javascript的答案.

我试图复制滑块在此网站上使用的缓慢缩放效果:https://www.palazzokitchens.co.nz/

我正在使用光滑的滑块,我该如何实现这种效果？

我尝试过scale(1.5)长时间的转换,但这也使它的孩子也能扩展.

我已经设置了一个滑块演示,非常感谢任何帮助:https://codepen.io/ifusion/pen/EvRPOB

我想制作以下动画:

一个带有2个相同箭头且悬停在第一个箭头上的div应该向左/向右移动.我试着这样做,但没有成功.我正在设置2个图像的背景,但我如何设置像gif这样的图像的动画？

.arrow-right2 {
    content: "";
    background: transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat, transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat;
    height: 35px;
    position: absolute;
    top: -5%;
    left: 0;
    width: 35px;
}