Question

我创建了运行在链接上的动画。

我使用进出关键帧创建了动画。

但是我遇到了问题。我认为这是由于骑士出场动画而发生的。但是我需要那个来离开鼠标。

问题是页面加载页面自动运行时。密码笔link

.container {
  padding: 50px;
  max-width: 500px;
}

.dashBottom {
  padding-left: 0px;
  position: relative;
  padding-bottom: 15px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  color: black;
  text-decoration: none;
}
.dashBottom:after {
  position: absolute;
  content: "";
  bottom: 0px;
  width: 30px;
  background-color: black;
  height: 4px;
  left: 0;
  right: auto;
  -webkit-animation: knight-rider-out 0.5s;
  animation: knight-rider-out 0.5s;
  animation-fill-mode: forwards;
}
.dashBottom:hover:after {
  -webkit-animation: knight-rider-in 0.5s;
  animation: knight-rider-in 0.5s;
  animation-fill-mode: forwards;
}

@keyframes knight-rider-in {
  from {
    left: 0px;
    width: 30px;
  }
  50% {
    left: 0px;
    width: 100%;
  }
  to {
    left: calc( 100% - 30px);
    width: 30px;
  }
}
@keyframes knight-rider-out {
  from {
    left: calc( 100% - 30px);
    width: 30px;
  }
  50% {
    left: 0px;
    width: 100%;
  }
  to {
    left: 0px;
    width: 30px;
  }
}

<div class="container">
    <a class="viewMore dashBottom" href="#">View More</a>
</div>

Answer 1

为避免这种情况，您可以考虑过渡。这是用更少的代码来达到相同效果的另一种方法：

ConnectionException{message=java.io.IOException: Stream Closed, status=0}
    at org.openstack4j.connectors.jersey2.HttpExecutorServiceImpl.invoke(HttpExecutorServiceImpl.java:58)
    at org.openstack4j.connectors.jersey2.HttpExecutorServiceImpl.execute(HttpExecutorServiceImpl.java:33)
    at org.openstack4j.core.transport.internal.HttpExecutor.execute(HttpExecutor.java:51)
    at org.openstack4j.openstack.internal.BaseOpenStackService$Invocation.execute(BaseOpenStackService.java:208)
    at org.openstack4j.openstack.internal.BaseOpenStackService$Invocation.execute(BaseOpenStackService.java:202)
    at org.openstack4j.openstack.image.internal.ImageServiceImpl.create(ImageServiceImpl.java:143)
    at com.test.user.nfvmano.vim.BasicOpenStackSessionImpl.createImage(BasicOpenStackSessionImpl.java:78)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.testng.internal.MethodInvocationHelper.invokeMethod(MethodInvocationHelper.java:124)
    at org.testng.internal.MethodInvocationHelper$1.runTestMethod(MethodInvocationHelper.java:230)
    at org.testng.internal.MethodInvocationHelper.invokeHookable(MethodInvocationHelper.java:242)
    at org.testng.internal.Invoker.invokeMethod(Invoker.java:579)
    at org.testng.internal.Invoker.invokeTestMethod(Invoker.java:719)
    at org.testng.internal.Invoker.invokeTestMethods(Invoker.java:993)
    at org.testng.internal.TestMethodWorker.invokeTestMethods(TestMethodWorker.java:125)
    at org.testng.internal.TestMethodWorker.run(TestMethodWorker.java:109)
    at org.testng.TestRunner.privateRun(TestRunner.java:651)
    at org.testng.TestRunner.run(TestRunner.java:508)
    at org.testng.SuiteRunner.runTest(SuiteRunner.java:455)
    at org.testng.SuiteRunner.runSequentially(SuiteRunner.java:450)
    at org.testng.SuiteRunner.privateRun(SuiteRunner.java:415)
    at org.testng.SuiteRunner.run(SuiteRunner.java:364)
    at org.testng.SuiteRunnerWorker.runSuite(SuiteRunnerWorker.java:52)
    at org.testng.SuiteRunnerWorker.run(SuiteRunnerWorker.java:84)
    at org.testng.TestNG.runSuitesSequentially(TestNG.java:1208)
    at org.testng.TestNG.runSuitesLocally(TestNG.java:1137)
    at org.testng.TestNG.runSuites(TestNG.java:1049)
    at org.testng.TestNG.run(TestNG.java:1017)
    at org.testng.TestNG.privateMain(TestNG.java:1354)
    at org.testng.TestNG.main(TestNG.java:1323)
Caused by: javax.ws.rs.ProcessingException: java.io.IOException: Stream Closed
    at org.glassfish.jersey.client.HttpUrlConnector.apply(HttpUrlConnector.java:229)
    at org.glassfish.jersey.client.ClientRuntime.invoke(ClientRuntime.java:225)
    at org.glassfish.jersey.client.JerseyInvocation$1.call(JerseyInvocation.java:655)
    at org.glassfish.jersey.client.JerseyInvocation$1.call(JerseyInvocation.java:652)
    at org.glassfish.jersey.internal.Errors.process(Errors.java:315)
    at org.glassfish.jersey.internal.Errors.process(Errors.java:297)
    at org.glassfish.jersey.internal.Errors.process(Errors.java:228)
    at org.glassfish.jersey.process.internal.RequestScope.runInScope(RequestScope.java:423)
    at org.glassfish.jersey.client.JerseyInvocation.invoke(JerseyInvocation.java:652)
    at org.glassfish.jersey.client.JerseyInvocation$Builder.method(JerseyInvocation.java:412)
    at org.openstack4j.connectors.jersey2.HttpCommand.execute(HttpCommand.java:79)
    at org.openstack4j.connectors.jersey2.HttpExecutorServiceImpl.invokeRequest(HttpExecutorServiceImpl.java:65)
    at org.openstack4j.connectors.jersey2.HttpExecutorServiceImpl.invokeRequest(HttpExecutorServiceImpl.java:70)
    at org.openstack4j.connectors.jersey2.HttpExecutorServiceImpl.invoke(HttpExecutorServiceImpl.java:56)
    ... 40 more
Caused by: java.io.IOException: Stream Closed
    at java.io.FileInputStream.readBytes(Native Method)
    at java.io.FileInputStream.read(FileInputStream.java:233)
    at org.glassfish.jersey.message.internal.ReaderWriter.writeTo(ReaderWriter.java:113)
    at org.glassfish.jersey.message.internal.AbstractMessageReaderWriterProvider.writeTo(AbstractMessageReaderWriterProvider.java:77)
    at org.glassfish.jersey.message.internal.InputStreamProvider.writeTo(InputStreamProvider.java:105)
    at org.glassfish.jersey.message.internal.InputStreamProvider.writeTo(InputStreamProvider.java:60)
    at org.glassfish.jersey.message.internal.WriterInterceptorExecutor$TerminalWriterInterceptor.invokeWriteTo(WriterInterceptorExecutor.java:263)
    at org.glassfish.jersey.message.internal.WriterInterceptorExecutor$TerminalWriterInterceptor.aroundWriteTo(WriterInterceptorExecutor.java:250)
    at org.glassfish.jersey.message.internal.WriterInterceptorExecutor.proceed(WriterInterceptorExecutor.java:162)
    at org.glassfish.jersey.message.internal.MessageBodyFactory.writeTo(MessageBodyFactory.java:1154)
    at org.glassfish.jersey.client.ClientRequest.writeEntity(ClientRequest.java:500)
    at org.glassfish.jersey.client.HttpUrlConnector._apply(HttpUrlConnector.java:315)
    at org.glassfish.jersey.client.HttpUrlConnector.apply(HttpUrlConnector.java:227)

.container {
  padding: 50px;
  max-width: 500px;
}

.dashBottom {
  padding-left: 0px;
  position: relative;
  padding-bottom: 15px;
  transition: all 0.3s;
  color: black;
  text-decoration: none;
  background-image:linear-gradient(#000,#000);
  background-size: 200% 4px;
  background-position: calc(200% + 30px) 100%;
  background-repeat:no-repeat;
  transition:0.5s all;
}

.dashBottom:hover {
  background-position:calc(-100% - 30px)  100%;
}

链接悬停动画问题（骑士动画）

1 个答案: