I don't think I double posted but if I did, sorry.
I have a problem with my CSS code:
I want the second text to show up when the first animation is finished.
So it will be something like:
First animation starting, second text hidden, then first animation finished, and then second text shown.
I think the problem are coming from the blinking animation (second_text_anim)
Here is my HTML code:
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
background: white;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
text-transform: uppercase;
display: block;
}
.first_text {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the
end of the first animation */
.second_text {
font-size: 30px;
color: darkcyan;
display: block;
animation: second_text_anim 1s 3s linear infinite;
}
#keyframes first_text_anim {
0% {
color: black;
margin-bottom: -40px;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
50% {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="first_text">First animation</span>
<span class="second_text">Second animation, should be displayed at the end </span>
</div>
</body>
</html>
Your animation-delay works but you also need to set animation-fill-mode.
Also, Change 50% to from for the second title, so it will set its initial state to opacity: 0;.
One last thing: To enable your blinking animation, add alternate to the shorthand.
This is the final result:
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background:white;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container span{
text-transform: uppercase;
display: block;
}
.first_text{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{
font-size: 30px;
color: darkcyan;
display: block;
animation:second_text_anim 1s 3s linear infinite alternate both;
}
#keyframes first_text_anim {
0%{
color: black;
margin-bottom: -40px;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
from {
opacity: 0;
}
}
<div class="container">
<span class="first_text"> > First animation </span>
<span class="second_text"> > Second animation, Should be displayed at the end </span>
</div>
you can use animation-delay.
here the code that iterate the second text every 3s
also this value order is not correct:
animation:second_text_anim 1s 3s linear infinite;
in animation short method you must order value, like this example:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div {
animation: example 5s linear 2s infinite alternate;
}
so in your code you must use it like this:
animation:second_text_anim 3s linear 4s infinite;
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background:white;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container{
text-transform: uppercase;
}
.first_text{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{
font-size: 30px;
color: darkcyan;
display: block;
opacity:0;
animation:second_text_anim 3s linear 4s infinite;
}
#keyframes first_text_anim {
0%{
color: black;
margin-bottom: -40px;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 8px;
margin-bottom: -40px;
}
}
#keyframes second_text_anim {
50% {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span class="first_text"> > First animation < </span>
<span class="second_text"> > Second animation, Should be displayed at the end < </span>
</div>
</body>
</html>
Related
I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.
When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?
<body>
<header>
<h1>xxxx xxxxxxx</h1>
<nav>
<ul>
<li>About Me</li>
<li id="contact_nav">Contact</li>
<li id="gallery_nav">Gallery</li>
</ul>
</nav>
<div class="container">
<div id="bar1" class="bar1"><p>Bespoke furniture ...</p></div><br>
<div id="bar2" class="bar2"><p>... and interesting items ...</p></div><br>
<div id="bar3" class="bar3"><p>... brought to life!</p></div><br>
</div>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Avenida Std';
src: url('AvenidaStd.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29);
}
h1, h2, h3, h4 {
font-family: 'Avenida Std';
}
header h1 {
font-size: 12vw;
color: grey;
position: absolute;
padding-left: 20px;
padding-top: 55px;
text-shadow: 0.10em 0.08em 5px black;
transform: rotate(-10deg);
}
nav {
position: relative;
}
nav ul {
align-content: right;
}
nav ul li {
font-family: 'Avenida Std';
font-size: 5rem;
margin-left: 85%;
padding-top: 20px;
list-style-type: none;
justify-content: right;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: yellow;
text-shadow: 0 0 40px yellow;
}
nav #contact_nav {
padding-top: 0.5rem;
}
nav #gallery_nav {
padding-top: 0.5rem;
padding-bottom: 0;
z-index: 100;
}
#bar1 {
width: 50vw;
height: 3rem;
background: black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#bar2 {
width: 50vw;
height: 3rem;
background: black;
}
#bar3 {
width: 50vw;
height: 3rem;
background: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.container {
position: relative;
}
.container p {
color: white;
font-family: sans-serif;
font-size: 2.5rem;
position: relative;
padding-left: 5px;
}
/* Bars Animation CSS */
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
}
#keyframes move1 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 80%;
}
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
}
#keyframes move2 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 65%;
}
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
z-index: 999;
}
#keyframes move3 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 52%;
}
}
Just add default value for transform like this:
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
transform: translateX(100vw); // added
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
transform: translateX(100vw); // added
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
transform: translateX(100vw); //added
z-index: 999;
}
I have simple CS3 animation which is flipping three words vertically.
Now my animation is not very smooth like you can see in my code. Is there any option on how to make it more smooth? Mainly the first text element is not showing smooth. I already tried ease-in-out but it's not better. Also tried changing the percentage of animations but that was only worse and worse.
MY HTML AND CSS CODE:
body {
background: #000;
}
h1 {
font-weight: 900;
font-style: italic;
font-size: 5em;
text-transform: uppercase;
text-align: center;
padding: 40px 0;
color: rgba(255, 255, 255, 1);
}
#flip {
height: 80px;
margin-left: 16px;
overflow: hidden;
}
#flip .flip-wrapper {
display: flex;
}
#flip>div>div {
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
color: #fff;
display: inline-block;
}
#flip .flip-container {
animation: show 5s linear infinite;
}
#keyframes show {
0% {
margin-top: -260px;
}
5% {
margin-top: -190px;
}
33% {
margin-top: -190px;
}
38% {
margin-top: -100px;
}
66% {
margin-top: -100px;
}
71% {
margin-top: -10px;
}
99.99% {
margin-top: -10px;
}
100% {
margin-top: -260px;
}
}
<h1>
Digital content
<span>
that
<div id=flip>
<div class="flip-container">
<div class="flip-wrapper"><div>works</div></div>
<div class="flip-wrapper"><div>earns</div></div>
<div class="flip-wrapper"><div>tellth</div></div>
</div>
</div>
</span>
</h1>
Try ease-in-out, the animation will have a slow start and a slow end.
#flip .flip-container {
animation: show 12s ease-in-out infinite;
}
You can see and try more examples of animation properties on this page
https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}
You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>