How to make an icon move up and down with CSS animation

how to move image up and down in css
css animation move up
css rotate animation on hover
css animation examples
css animation tricks
how to animate up and down css
css animation infinite move
css rotate animation on click

So I need to make a plane icon float like this. I need to make it only with CSS animation, no JS. I have no idea how to make it fly upwards and downwards. I attached some code that I wrote.

html

.button-block {
    display: flex;
    justify-content: center;
}
.block-button-1 {
    text-align: center;
    border-radius: 35px;
    color: white;
    font-size: 21px;
    border: none;
    height: 75px;
    width: 330px;
    background-color: #4b9cdb;
    border-color: #bbdcff;
    box-shadow: 0px 0 15px #bbdcff;
}

.button-image {
    position: fixed;
    height: 30px;
    width: 30px;
    margin: 24px 0 0 -130px;
    animation: 2s ease infinite;
}
<div class="button-block">
        <img class="button-image" src="images/plane.png">
        <button class="block-button-1">Забронировать полёт</button>
    </div>

You can accomplish what you are trying to do by the addition of an animation that moves the Y position of the image up and down:

@keyframes updown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

On your image element CSS:

.button-image {
    ...
    animation: updown 2s ease infinite;
}

Here's the working snippet:

.button-block {
    display: flex;
    justify-content: center;
}
.block-button-1 {
    text-align: center;
    border-radius: 35px;
    color: white;
    font-size: 21px;
    border: none;
    height: 75px;
    width: 330px;
    background-color: #4b9cdb;
    border-color: #bbdcff;
    box-shadow: 0px 0 15px #bbdcff;
}

.button-image {
    position: fixed;
    height: 30px;
    width: 30px;
    margin: 24px 0 0 -130px;
    animation: updown 2s ease infinite;
}

@keyframes updown {
  0% {
    transform: translateY(-100%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}
<div class="button-block">
        <img class="button-image" src="images/plane.png">
        <button class="block-button-1">Забронировать полёт</button>
    </div>

How to move a div up and down infinitely in CSS3?, 4 Answers. You'll probably want to add animation-direction: alternate; (or -webkit-animation-direction: alternate ) to your style rules on . piece-open-space #emma . That should give you that floating-up-and-down-effect. Although it might be possible to do complex animations purely through css, it often isn’t worth going down a pure css route. It’s better to go with a js animation engine like GSAP. JS animation engines give you much finer control over the animation and it is still very performant.


Here you go

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
<div class="floating"
     style="height: 50px; width: 50px; background: rgb(200,200,200);">
</div>

How to Animate a Bouncing SVG Icon With CSS – Techstacker, How to Animate a Bouncing SVG Icon With CSS Today you'll learn how to use CSS animations to make an arrow SVG icon bounce up and down. Notice that in-between the two keyframes where the arrow moves up (40%� See the Pen YqBdxx by CSS-Tricks (@css-tricks) on CodePen. Tip 5: Use class names for specific icons. The example above is great but you may have noticed that the location icon looks so gosh darn narrow and even further from the text labels than the music note. How annoying! This is where CSS on a per-icon basis can bail us out.


CSS code can be something like this:

.button-container{
            display         :flex;
            justify-content :center;
            align-items     :center;
        }

        .button-block{
            align-self :center;
            position   :relative;
        }

        .block-button-1{
            text-align       :center;
            border-radius    :35px;
            color            :white;
            font-size        :21px;
            height           :75px;
            width            :330px;
            background-color :#4b9cdb;
            border           :none #bbdcff;
            box-shadow       :0 0 15px #bbdcff;
        }

        .button-image{
            position  :absolute;
            height    :30px;
            width     :30px;
            top       :10px;
            left      :24px;
            animation :up_down 2s ease infinite;
        }

        @keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

        @-webkit-keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

        @-khtml-keyframes up_down{
            0%{
                top :10px;
            }
            50%{
                top :24px;
            }
            100%{
                top :10px;
            }
        }

html code will be something like below:

 <div class="button-container">
        <div class="button-block">
            <img class="button-image" src="images/plane.png">
            <button class="block-button-1">Забронировать полёт</button>

        </div>
    </div>

 .button-container{
                display         :flex;
                justify-content :center;
                align-items     :center;
            }

            .button-block{
                align-self :center;
                position   :relative;
            }

            .block-button-1{
                text-align       :center;
                border-radius    :35px;
                color            :white;
                font-size        :21px;
                height           :75px;
                width            :330px;
                background-color :#4b9cdb;
                border           :none #bbdcff;
                box-shadow       :0 0 15px #bbdcff;
            }

            .button-image{
                position  :absolute;
                height    :30px;
                width     :30px;
                top       :10px;
                left      :24px;
                animation :up_down 2s ease infinite;
            }

            @keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }

            @-webkit-keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }

            @-khtml-keyframes up_down{
                0%{
                    top :10px;
                }
                50%{
                    top :24px;
                }
                100%{
                    top :10px;
                }
            }
 <div class="button-container">
            <div class="button-block">
                <img class="button-image" src="images/plane.png">
                <button class="block-button-1">Забронировать полёт</button>

            </div>
        </div>

CSS Animation: Translate up/down:, Fold All; Unfold All. xxxxxxxxxx. 1. 1. <img src="http://media.whatcounts.com/ whatcounts_marketing/170825_InteractiveEmail/weather2.jpg" class="vert-move" />. img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation is finished, start again */


Apply the below CSS code on the icon:

animation: bounce 1s infinite;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;

Animation Using CSS Transforms < CSS, How to scale, rotate, translate and transform elements using new CSS hover effects To have more control over the animation paths and timing, you can set up come first, and the box will move quickly from right to left before slowing down. Default value. The animation is played as normal (forwards) Play it » reverse: The animation is played in reverse direction (backwards) Play it » alternate: The animation is played forwards first, then backwards: Play it » alternate-reverse: The animation is played backwards first, then forwards: Play it » initial: Sets this property to its


CSS transitions 101: Let's animate a toggle button icon, Here, you'll learn when CSS transitions make a good choice for your project and It starts slow, then speeds up, then slows down, and finally ends very slowly: .hamburger__icon::before, .hamburger__icon::after { position:� The function starts by displaying an empty battery icon: After one second, the icon is replaced by a new icon: The icon is replaced by a new icon each second, until "the battery is fully charged": This process is repeated every 5 second, making it seems like the battery is charging.


Making things move with CSS3 animations � WebPlatform Docs, CSS animations allow you to build complex animated sequences. To understand how animations work, start with an example of a pulsing icon, which may the delayed animation starts to execute, and it slides down to its default position. querySelectorAll('div'); for (var i = 0, l = divs.length; i < l; i++) { // set delay up to 1� What are CSS Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.


Css animation move up and down, In this post I show how create create transitions to mimic most of jQuery's slideUp () and slideDown() functions using CSS and small jQuery Surprisingly, this colorful calendar even lets you move up & down the page with small arrow icons. In the next section, let's go one step further and see how you would use it as part of an actual CSS Transition or Animation to simulate movement. Transition. To use this property in a transition, you have two steps. In the first step, you specify the transform property as the property you want your transition to listen to: