Question

我的文字显示为“查看我的作品”，当用户翻阅时，它会从黑色变为紫色。但是，无论我为过渡设置了什么时间，它的时间都非常慢：背景位置#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不太了解，所以我不知道那是不是弄乱了我的代码。或我网站上的其他动画（当您将鼠标悬停在“人为因素工程师”上时，线条弯曲的线条弯曲）。感谢帮助！

Answer 1

您的标签有动画。并且过渡对动画不起作用，因为动画具有自己的持续时间

将此15s更改为您想要的

a{
    animation: move 15s linear infinite;
    -webkit-animation: move 15s linear infinite;
}

CSS动画无法与同一代码中的另一个CSS + JS动画一起使用

1 个答案: