Problem in applying CSS Animate

Asked

Viewed 37 times

2

I’m trying to implement the Animate.css feature as shown in this documentation below.

ANIMATE.CSS

I’m not able to implement this feature, I did the step by step and it didn’t work.

I didn’t put jquery import from the documentation, I put these;

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/script.js"></script>

I put the Animate.css file in the project as you can see;

<link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

I completed the implementation on the button;

.logo{
    padding-top: 20px;
    margin: 0;
    padding-bottom: 60px;
    text-align: center;
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

Then I set the button;

 <div class="logo animated bouce">
                <img src="img/logofinal2.png"  height="150" >
        </div>

But nothing has happened.

animate.css

1 answer

1


Dude you’re using something wrong, for example where you are vendor you should put the prefix at once, like -ms-, -o- or -webkit- In the example I did with your original code I only added the -webkit-in the styles of animation. Another thing you can put the infinite directly in the element tag in class="", so you don’t have to put animation-iteration-count:infinite, EX: <h1 class="animated infinite bounce logo">Example</h1>

See the structure of animete.css as it is next to Bootstrap4 which is what you’re using. OBS: I also remember that you don’t necessarily need JS or jQuery to use Animate.css, because as the name says it is pure css has no scripts...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
.logo{
    padding-top: 20px;
    margin: 0;
    padding-bottom: 60px;
    text-align: center;
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    animation-duration: 2s;
    animation-delay: 1s;
}
</style>
</head>
<body>
    
    <h1 class="animated infinite bounce logo">Example</h1>
    <div class="animated infinite bounce logo">
        <img src="https://placecage.com/100/100"  height="150" >
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Browser other questions tagged animate.css

You are not signed in. Login or sign up in order to post.