Problem in applying CSS animate

Navigation
2

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

ANIMATE.CSS

I am not able to implement this feature, I did it step by step and it did not work.

I did not put the jquery import of 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 set the button; 

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

But nothing happened.

    
asked by anonymous 10.05.2018 / 12:19

1 answer

1

If you are using vendor you should put the prefix at once, type -ms- , -o- or -webkit- In the example I made with your original code only added -webkit- to the animation styles. Another thing you can put infinite direct in the element tag in class="" , so you do not have to animation-iteration-count:infinite EX: <h1 class="animated infinite bounce logo">Example</h1>

See the structure of animete.css as it sits next to Bootstrap4 which is what you are using. 

<!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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
    
10.05.2018 / 12:33
Is it possible to search a data in the database without knowing which table it is in? Contact Form PHPMailer does not work