Question

我为我的网站徽标编写代码。当鼠标悬停在徽标上时，它可以正常工作，但我希望在加载网站时动画自动播放无限。我使用关键帧但没有工作，我很困惑。

我的CSS代码：

@import url(https://fonts.googleapis.com/css?family=Raleway);
html{
  font: .9em 'Raleway',sans-serif;
  height: 100%;
  text-align: center;
  background: radial-gradient(50% 0,rgba(255,255,255,.3),rgba(255,255,255,0)), deepskyblue;
  color: rgba(0,0,0,.6);
}
p a{
  color: rgba(0,0,0,.6);
}
.mask a{
  position: relative;
  display:block;
  width:150px;
  height: 64px;
  text-align:center;
  margin: 50px auto;
  background: ;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
}
.mask a{
  background-position: -140px 0;
  
}
.mask a:hover,
.mask a:focus{
  background-position: 10px 0;
  /*change speed to see in slow motion*/
  transition: all 1s;
}
.mask a::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit; 
  -webkit-mask: url('http://dev.iamvdo.me/newLogoCSS3create2.png') center;
  mask: url('#mask-firefox');
}

<div class="mask pseudo">
  <a href="http://css3create.com">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" alt="CSS3Create logo" />
  </a>
</div>


<svg height="0">
  <!-- THE mask -->
  <mask id="mask-firefox">
    <image width="150" height="64" xlink:href="http://dev.iamvdo.me/newLogoCSS3create2.png" filter="url(#filter)" /> 
  </mask>
  
  <!-- the filter to make the image white -->
  <filter id="filter">
    <feFlood flood-color="white" />
    <feComposite in2="SourceAlpha" operator="in" />
  </filter>
</svg>

Answer 1

请查看此示例，该示例使用不定式的迭代计数声明名为 shineFx 的动画。

.mask a{
    position: relative;
    display:block;
    width:150px;
    height: 64px;
    text-align:center;
    margin: 50px auto;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
    animation-name: shineFx;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}


@keyframes shineFx {
    from {background-position: -140px 0px;}
    to {background-position: 10px 0;}
}

将CSS悬停动画转换为自动动画

1 个答案: