Html Code: Animated list

Show your list of links or other contents like photo by animated list plugin written by Jquery. You can use this interesting plugin in the box of your links in the sidebar or many places to give your page a nice impression.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<style>
@import url(https://fonts.googleapis.com/css?family=Lato);

$total-items: 5;

body {
    font-family: 'Lato', sans-serif;
    background: #111;
    color: #fff;
}

ul {
    margin: 0 !important;
    padding: 0 !important;
}

li {
    position: relative;
    display: block;
    border: 1px solid hotpink;
    margin-bottom: 5px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    animation: fadeIn 0.5s linear;
    animation-fill-mode: both;
}


@for $i from 1 through $total-items {
    li: nth-child(#{$i})

{
    animation-delay: .25s * $i;
}

}


@-webkit-keyframes fadeIn {
    0%

{
    opacity: 0;
    top: 100px;
}

75% {
    opacity: 0.5;
    top: 0px;
}

100% {
    opacity: 1;
}

}

</style>

<ul >
    <li style="animation-delay:0.5s"><a href="https://www.htmlbestcodes.com/">Useful free HTML code</a></li>
    <li style="animation-delay:1s"><a href="https://www.htmlbestcodes.com/">Make your website more interesting</a></li>
    <li style="animation-delay:1.5s"><a href="https://www.htmlbestcodes.com/">Impelement easy</a></li>
    <li style="animation-delay:2s"><a href="https://www.htmlbestcodes.com/">Beautiful and interesting</a></li>
    <li style="animation-delay:2.5s"><a href="https://www.htmlbestcodes.com/">All at htmlbestcodes.com</a></li>
    <li style="animation-delay:3s"><a href="https://www.htmlbestcodes.com/">www.htmlbestcodes.com</a></li>
</ul><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Animated list

Links