我有一个文本，上面写着"查看我的作品"，当用户浏览它时，它会从黑色变为紫色。然而，无论我为转换设置了什么时间，它的时间都非常慢：背景位置#ms轻松。我从这里改编了这个代码：https://codepen.io/kathykato/pen/gObBybX
这是我使用它的网站：https://mango-harmonica-5r95.squarespace.com/aboutme
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head>
<body>
<center><h4 class="animated bounceInDown"><a href="#selected-works">View my work</a></h4>
<span class="animated bounce"></span></center>
</body>
<style>
h4 {
font-family: 'Rubik', sans-serif;
overflow-x: hidden;
color: #000;
font-size: 24px;
font-weight: 600;
padding-bottom: 70px;
padding-left: 30px;
text-decoration: none;
}
h4 a {
position: relative;
display: inline-block;
color: #7500FF;
overflow: hidden;
background: linear-gradient(to right, #000, #000 50%, #7500FF 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 5ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
span.animated {
position: absolute;
bottom: 50px;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid #7500FF;
animation-duration: 2.5s;
animation-iteration-count: infinite;
}
header span::before,
header span::after {
position: absolute;
content: "";
height: 0px;
width: 0px;
}
span::before {
left: -10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
span::after {
right: -10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// Scroll function courtesy of Scott Dowding; http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
$(document).ready(function() {
// Check if element is scrolled into view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return elemBottom <= docViewBottom && elemTop >= docViewTop;
}
// If element is scrolled into view, fade it in
$(window).scroll(function() {
$(".scroll-animations .animated").each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass("fadeInLeft");
}
});
});
// Click Animations
$("button").on("click", function() {
/*
If any input is empty make it's border red and shake it. After the animation is complete, remove the shake and animated classes so that the animation can repeat.
*/
// Check name input
if ($("#name").val() === "") {
$("#name")
.addClass("form-error animated shake")
.one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function() {
$(this).removeClass("animated shake");
}
);
} else {
$("#name").removeClass("form-error");
}
// Check email input
if ($("#email").val() === "") {
$("#email")
.addClass("form-error animated shake")
.one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function() {
$(this).removeClass("animated shake");
}
);
} else {
$("#email").removeClass("form-error");
}
// Check message textarea
if ($("#message").val() === "") {
$("#message")
.addClass("form-error animated shake")
.one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function() {
$(this).removeClass("animated shake");
}
);
} else {
$("#message").removeClass("form-error");
}
});
});
</script>我对java了解不多，所以我不知道这是否是扰乱我代码的原因。或者我网站上的其他动画(当你把鼠标悬停在"人为因素工程师"上时，歪歪扭扭的线就会歪歪扭扭扭(。感谢您的帮助！
您的a标记有一个动画。并且过渡不适用于动画，因为动画有自己的持续时间
把这个15秒改成你想要的
a{
animation: move 15s linear infinite;
-webkit-animation: move 15s linear infinite;
}