Css3动画无限运行缩放效果

Question

我需要帮助。 我想用下面的css3为背景图像设置动画是我想要做的。

它不起作用。任何人都可以指导我缺乏的地方。

＆＃13;

＆＃13;

div.top {
    width: 100%;
    float: left;
    position: relative;
    background: #000000;
    overflow: hidden;
    height:500px
}

div.top:before {
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px;
    content: "";
    display: inline-block;
    height: 100%;
    opacity: 0.49;
    position: absolute;
    top: 0;
    width: 100%;
    /*z-index: -1;*/
    animation: 50s ease 0s normal none infinite running zoomEffect;
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
    -o-animation: 50s ease 0s normal none infinite running zoomEffect;
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
    transform: scale(1, 1) translate(0px, 0px);
    -webkit-transform: scale(1, 1) translate(0px, 0px);
    -moz-transform: scale(1, 1) translate(0px, 0px);
	-o-transform: scale(1, 1) translate(0px, 0px);
}

＆＃13;

<div class="top">Animate background image here</div>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

您需要定义动画zoomEffect

@keyframes zoomEffect {
    from {transform: scale(1, 1)}
    to {transform: scale(2, 2)}
}

您可以在此处详细了解：CSS3 Animations

div.top {
  width: 100%;
  float: left;
  position: relative;
  background: #000000;
  overflow: hidden;
  height: 500px
}
div.top:before {
  background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 0.49;
  position: absolute;
  top: 0;
  width: 100%;
  /*z-index: -1;*/
  animation: 50s ease 0s normal none infinite running zoomEffect;
  -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
  -o-animation: 50s ease 0s normal none infinite running zoomEffect;
  -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
    from {transform: scale(1, 1)}
    to {transform: scale(2, 2)}
}

<div class="top">Animate background image here</div>