Question

让我先粘贴我的代码

p{
	width: 100px;
	margin:auto;
	text-align:center;
	}
	p:hover{
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
		background-position: -100% 6px;
		animation-name: in;
		animation-duration: 1s;
		/*animation-direction: reverse;*/
	}
	
	@keyframes in {
  		0% { background-position: -100% 6px; }
  		100% { background-position: 100% 6px; }
}

<p>TESTING</p>

Demo

我希望背景从左到右动画，但未能获得。我试了animation-direction: reverse;没有运气。

你能指导我解决这个问题吗？

由于

Answer 1

我觉得它的工作正常

   p:hover{
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: -100% 1px;
        animation-name: in;
        animation-duration: 1s;
        animation-direction: reverse;
    }

    @keyframes in {
        0% { background-position: 100% 6px; }
        100% { background-position: 200% 6px; }
}

p{
	width: 100px;
	margin:auto;
	text-align:center;
	}
	p:hover{
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
		background-position: -100% 1px;
		animation-name: in;
		animation-duration: 1s;
		animation-direction: reverse;
	}
	
	@keyframes in {
  		0% { background-position: 100% 6px; }
  		100% { background-position: 200% 6px; }
}

<p>TESTING</p>

Answer 2

尝试将func (*smartContract) Invoke(stub shim.ChaincodeStubInterface) peer.Response { fmt.Println("Invoke") serializedID, _ := stub.GetCreator() sId := &msp.SerializedIdentity{} err := proto.Unmarshal(serializedID, sId) if err != nil { return shim.Error(fmt.Sprintf("Could not deserialize a SerializedIdentity, err %s", err)) } bl, _ := pem.Decode(sId.IdBytes) if bl == nil { return shim.Error(fmt.Sprintf("Could not decode the PEM structure")) } cert, err := x509.ParseCertificate(bl.Bytes) if err != nil { return shim.Error(fmt.Sprintf("ParseCertificate failed %s", err)) } fmt.Println(cert) return shim.Success(nil) }应用于关键帧background-position: 200% 6px;。

100%

p{
		width: 100px;
		margin:auto;
		text-align:center;
	}
	p:hover{
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
     background-position: -100% 1px;
		animation-name: in;
		animation-duration: 1s;
     animation-direction: reverse;
	}
	
	@keyframes in {
  		0% { background-position: 100% 6px; }
  		100% { background-position: 200% 6px; }
        }

以下是codepen demo

CSS3动画反向

2 个答案: