动画. css不工作不知道为什么？

c9x0cxw0 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(135)

我是HTML和CSS的新手，想给我的试用版网站做动画，但是当我把Animation.css添加到我的文件中时，它把它弄得一团糟，不能做动画，把我的图片和背景弄得一团糟。
下面是我的代码：

h2 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 282px;
  text-transform: uppercase;
  font-size: 45px;
  animation-name: animation1;
  animation-duration: 2;
}
h1 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 250px;
  text-transform: uppercase;
  font-size: 55px;
}
img {
  position: relative;
  bottom: 0px;
  left: 425px;
}
body {
  background-image: url(cool%20gradient.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
a {
  color: hotpink;
  text-transform: uppercase;
  font-size: 30px;
  position: relative;
  left: 165px;
  bottom: -50px;
}

<h2 class="animated bounceInRight">Want to see a Pug</h2> 
<h1 class="animated bounceInLeft">Licking a Screen</h1>
<img class="animated fadeInDown" src="Down-Arrow1.png" style="width:200px;height:200px;">
<a class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>

感谢所有的帮助！

css

来源：https://stackoverflow.com/questions/34713789/animate-css-not-working-dont-know-why

3条答案

按热度按时间

ccrfmcuu1#

如果你的代码是好的，但不能看到动画效果，这个问题是为您的Windows设置性能选项
你应该从CSS文件（animate.css）中删除此代码，然后使用Ctrl + F5键清除浏览器缓存，并查看刷新的网页

@media (print), (prefers-reduced-motion: reduce) {
.animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
}}

赞(0）回复(0）举报 2023-04-08

x9ybnkn62#

<style>标记属于<head>部分。还要确保animate.min.css文件存在并且文件的路径正确。

<!DOCTYPE html>
<html>

  <head>
    <style>
    h2 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 282px;
        text-transform: uppercase;
        font-size: 45px;
        animation-name: animation1;
        animation-duration: 2;
        }

    h1 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 250px;
        text-transform: uppercase;
        font-size: 55px;
       }

    img {
        position: relative;
        bottom: 0px;
        left: 425px;   
        }

    body {
        background-image: url(cool%20gradient.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        }   

    a {
        color: hotpink;
        text-transform: uppercase;
        font-size: 30px;
        position: relative;
        left: 165px;
        bottom: -50px;
      }   

    </style>
    <link rel="stylesheet" href="animate.min.css">     
  </head>  

  <body>
   <h2 class="animated bounceInRight">Want to see a Pug</h2> 
   <h1 class="animated bounceInLeft">Licking a Screen</h1>
   <img class="animated fadeInDown" src="Down-Arrow1.png"      style="width:200px;height:200px;">
   <a  class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>   
  </body>
</html>

赞(0）回复(0）举报 2023-04-08

kpbpu0083#

animate.css库尊重您的系统关于动画的设置。其他动画库不尊重您的系统关于动画的设置。在Windows上，请确保您允许如下所示的动画。animate.css库尊重您的设置。
有关系统动画设置的更多信息，请访问MDN：：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

赞(0）回复(0）举报 2023-04-08

我来回答

动画. css不工作不知道为什么？

3条答案

相关问题

热门标签

最新问答