How to make arc-in animation on a website - CSS or JavaScript?


Tags: javascript,css,animation

Problem :

I am making my own website (Joomla based, but currently doing the HTML/CSS part for the template so I can't ask that in Joomla stack exchange and I thought will ask here).

This is my old website, on Wix:

If you look at the bottom-right you will find the 4 links for social (Facebook, G+ etc).

Wix let me animate them nicely in an "arc-in" fashion (it's shown once when you first load/reload the page). Now I am trying to recreate the same thing using CSS but can't find any reference how such arc-in animation would be done in CSS?

I'd rather animate the element in CSS but I am open to do this in JavaScript if it would turn out too much to do in CSS. I'm a bit green in JavaScript so please explain it to me in detail how to achieve this.

Much appreciate all the help.



Solution :

Having read your question i was decide to goof around with css3 animations(cos i like animations) and have made a sort of what you've been asking. Don't pretend my code to be exactly what you need but nevertheless you can play around and get what needed.

<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
        <div class="social-icons">
                <i class="fa fa-google-plus-square fa-5x"></i>
                <i class="fa fa-twitter-square fa-5x"></i>
                <i class="fa fa-facebook-square fa-5x"></i>
                <i class="fa fa-youtube-square fa-5x"></i>
        </div>
</body>



.social-icons {
        display: inline-block;
        position: absolute;
        top: 40%;
        left: 35%;
        opacity: .2;
        transform: perspective(500px) rotateY(180deg) translateZ(300px);
}

.social-icons:hover {
        transform-origin: center;
        animation: rotation 3s ease forwards;
}

@keyframes rotation {
        from {
                opacity: .2;
                transform: perspective(1500px) rotateY(180deg) translateZ(700px);
        }
        to {
                opacity: 1;
                transform: perspective(1500px) rotateY(0deg) translateZ(0px);
        }
}


The pen itself
Hope you would like it.


    CSS Howto..

    How to use environment variables in ReactJS imported CSS?

    How to highlight 3 line toggle button when i hover?

    jQuery-Based Dropdown Shows Gap Outside of Firefox

    background image also header image cc trick how to do it? [closed]

    How to make one list-item in menu higher than the others with CSS?

    How to highlight the table row using jquery in Rails 3?

    How to set z-index in css background

    How to remove space after div in my td when one div uses “relative” position?

    How is box-shadow returned in IE9?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    Shadow DOM: how to apply CSS style only if the host element is ?

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How to include php page which include also a css file?

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to set a CSS property with a variable in JQuery?

    How can I use bootstrap in css file?

    How can I make my form autoscale correctly?

    How to fit 25 divs inside one div when I have more than 25 child divs?

    I created a jQuery slideshow but it keeps repeating the same image

    How does -ms-view-state differ from standard CSS Media Queries Expressions?

    How to solve css double hover issue? Making an image map

    How to make responsive text that isn't too large or too small

    How to construct multilevel menu using CSS only?

    How to create rounded shapes with css or SVG

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    Web Extension : How do I use “browser_style = true”?

    CSS : How to make two column right fluid left fluid depend on right

    How do I prevent fadeIn/Out blinking with expanding/collapsing header?

    How to cancel out .table width:100% in bootstrap css