Floating Animation in CSS | CSS Animations
VIDEO:
Description:
Floating Animation in CSS | CSS Animations | amaos3 In this video you are going to learn floating animation in css3. You can also learn how to use different css tricks to learn css animations.
Create Index.html File and Paste This Code:
<div class="container">
<div class="avatar">
<a href="https://codepen.io/MarioDesigns/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/skytsunami.png" alt="Skytsunami" />
</a>
</div>
<div class="content">
<h1>Floating CSS animation</h1>
<p>Follow me on:</p>
<p>
<span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>
<span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>
<span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>
<span><a href="https://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>
</p>
<h3>Source Code: Link In Description</h3>
</div>
</div>
<a class="suppoprt-me" href="https://www.buymeacoffee.com/marioduarte" target="_blank"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee &emoji=&slug=marioduarte&button_colour=FF5F5F&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>
Now copy CSS and Paste It In Style.css
body,
html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
background: rgb(26, 188, 156);
background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%);
}
h1 {
font-size: 24px;
margin: 10px 0 0 0;
font-weight: lighter;
text-transform: uppercase;
color: #eeeeee;
}
p {
font-size: 12px;
font-weight: light;
color: #333333;
}
span a {
font-size: 18px;
color: #cccccc;
text-decoration: none;
margin: 0 10px;
transition: all 0.4s ease-in-out;
&:hover {
color: #ffffff;
}
}
@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
img { width: 100%; height: auto; }
}
.content {
width: 100%;
max-width: 600px;
padding: 20px 40px;
box-sizing: border-box;
text-align: center;
}
.suppoprt-me {
display: inline-block;
position: fixed;
bottom: 10px;
left: 10px;
width: 20vw;
max-width: 250px;
min-width: 200px;
z-index: 9;
img {
width: 100%;
height: auto;
}
}
CSS Animation:
Basically Animation is the shorthand property for the following properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. For this article, we will be using animation-name, animation-duration, animation-iteration-count, animation-timing-function.
Thank You For Reading
0 Comments