So I am Pretty new to programming and I just started with html, css, JavaScript and a bit of php. I've tried to make a dropdown menu with animations. It works prety god but now i want to add "reverse" animations for the menu Options but i can't get it to work without playing the "fade out" Animation when the Options are loaded. I hope my Problem is clear enought and I'm Looking Forward to find someone who can help me out with my problem. ps: I'm german so sorry for grammar mistakes ;)
index.html:
<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template.css"/>
<head>
<title>Stephen's Site</title>
</head>
<body>
<div id="menu1"><font color="c079da">Instagram</font></div>
<div id="menu2"><font color="da5148">Youtube</font></div>
<div id="menu3"><font color="68b9e1">Twitter</font></div>
<div id="menu4"><font color="000">Menutest V2</font></div>
<div id="bild1"></div>
<div id="link1"><font color=000">Menutest V1</font></div>
<!-- <div class="dropdown">
<div class="dropdown-button">
Menu
</div>
<ul>
<li>Spalte 1</li>
<li>Spalte 2</li>
<li>Spalte 3</li>
<li>Spalte 4</li>
</ul>
</div>
-->
<div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
</body>
</html>
"menutest.html"(where the Dropdown items are in):
<html>
<link rel="stylesheet" href="/templates/simplyblu_j1.5/css/template3.css"/>
<head>
<title>Stephen's Site</title>
</head>
<body>
<div class="dropdown">
<div class="dropdown-button">
Menu</div>
<ul class="opt">
<li><font color="000"<div id="opt1">Hauptseite</font></li>
<li><font color="000"<div id="opt2">Hauptseite2</font></li>
<li><font color="000"<div id="opt3">Hauptseite3</font></li>
<li><font color="000"<div id="opt4">Hauptseite4</font></li>
</ul>
</div>
<div id="credit1"><font color="d97757--">Made by Stephen Scholz</font></div>
</body>
</html>
template3.css (css file for Dropdown menu) :
background-image: url(../images/background.png);
margin: 0px;
padding: 0px;
font-size: 14px;
background-color: #F9EBAE;
background-repeat: repeat-x;
}
#credit1 {
font-size: 25px;
width: 100px;
height: 100px;
margin-left: 5px;
margin-top: 3400px;
border: 3px solid #cfcecf;
}
.dropdown{
margin: 0 auto;
margin-top: 50px;
width: 150px;
}
.dropdown-button {
padding: 10px;
background: white;
}
.dropdown-button a{
color: #333;
text-decoration: none;
*border: 3px solid #cfcecf;
}
.dropdown ul{
list-style-type: none;
background: white;
*border: 3px solid #cfcecf;
animation: load 1s forwards;
}
.dropdown ul li{
margin-top: 0px;
padding: 10px 5px;
*background: white;
display: none;
opacity: 0;
animation: load 1s forwards
}
.dropdown:hover li{
animation: load 0.3s forwards;
display: block;
}
#keyframes load {
0%{
transform: scale(0) translateX(100px) rotate(-45deg);
}
100%{
opacity: 1;
transform: scale(1) translateX(0px) rotate(0);
/*box-shadow: 0px 0px 10px black;*/
}
0%{
transform: scale(0) translateX(100px) rotate(-45deg);
}
}
#opt1:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt2:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt3:hover {
animation: opt 0.5s forwards;
display: block;
}
#opt4:hover {
animation: opt 0.5s forwards;
display: block;
}
#keyframes opt{
0%{
transform: scale(1);
}
100%{
transform: scale(1.4);
}
}
#opt1 {
animation: optout 1s forwards;
display: block;
}
#opt2 {
animation: optout 1s forwards;
display: block;
}
#opt3 {
animation: optout 1s forwards;
display: block;
}
#opt4 {
animation: optout 1s forwards;
display: block;
}
#keyframes optout {
0%{
transform: scale(1.4);
}
100%{
transform: scale(1);
}
}```
Related
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 want to animate the divs in HTML and CSS as shown in the videoPlease find Video here. I had tried something but it is not working as my divs have 2 types of animation at a time. Please help with it. Thanks in advance.
My code snippet is -
<div className="container">
<div className="content">R</div>
<div className="content">E</div>
<div className="content">D</div>
<div className="content">B</div>
<div className="content">O</div>
<div className="content">O</div>
<div className="content">K</div>
</div>
And CSS file is -
div.container {
height: 200px;
border: 2px solid #ddd;
padding: 5px;
display: inline-block;
}
div.stone {
height: 20px;
width: 20px;
border: 1px solid #bbb;
border-radius: 4px;
display: inline-block;
float: left;
margin-left: 5px;
color: white;
padding: 10px;
text-align: center;
font-size: 18px;
background-color: #fa7878;
-webkit-animation: spin 1s linear;
-moz-animation: spin 1s linear;
animation: spin 1s linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
10% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
div.stone:first-child {
// sepatrate animation code
}
See the snippet below. Notice when you hover over an item, the item's background color changes but the transform: translateY(-5px) is being ignored. The hover's transform style only works if the .list-item animation is not set.
How can I get the translateY(-5px) on hover to work in the code?
.list {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0;
}
.list-item {
cursor: pointer;
margin-bottom: 14px;
padding: 12px 16px;
border-radius: 50px;
background: #EFEFEF;
animation-name: popin;
animation-fill-mode: both;
animation-duration: .6s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-delay: 0.1s;
}
.list-item:hover {
background-color: yellow;
transform: translateY(-5px);
}
#keyframes popin {
0%{
transform:scale(0);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}
<div class="list">
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
</div>
UPDATE
I also need to have a transition when the translation is done.
Remove the last state from the animation since it's the default one and you will be able to override the transform. Basically the animation will consider the state of the element as the 100% and when you change it on hover it will also change in the animation.
If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.ref
.list {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0;
}
.list-item {
cursor: pointer;
margin-bottom: 14px;
padding: 12px 16px;
border-radius: 50px;
background: #EFEFEF;
animation-name: popin;
animation-fill-mode:both;
animation-duration: .6s;
/*animation-iteration-count: 1; also not needed */
animation-timing-function: ease;
animation-delay: 0.1s;
}
.list-item:hover {
background-color: yellow;
transform: translateY(-5px);
}
#keyframes popin {
0%{
transform:scale(0);
}
50%{
transform:scale(1.1);
}
}
<div class="list">
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
</div>
UPDATE
if you want the transition you can adjust the code slightly to be able to have two elements where it would be easy to apply transform independently:
.list {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0;
}
.list-item {
cursor: pointer;
margin-bottom: 14px;
animation-name: popin;
animation-fill-mode:both;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: 0.1s;
}
.list-item:before {
content:attr(data-text);
display:block;
padding: 12px 16px;
border-radius: 50px;
background: #EFEFEF;
transition:1s all;
}
.list-item:hover:before {
background-color: yellow;
transform: translateY(-5px);
}
#keyframes popin {
0%{
transform:scale(0);
}
50%{
transform:scale(1.1);
}
}
<div class="list">
<div class="list-item" data-text="item"></div>
<div class="list-item" data-text="item"></div>
<div class="list-item" data-text="item"></div>
<div class="list-item" data-text="item"></div>
<div class="list-item" data-text="item"></div>
<div class="list-item" data-text="item"></div>
</div>
You can also consider an extra wrapper like below:
.list {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0;
}
.list-item {
cursor: pointer;
margin-bottom: 14px;
animation-name: popin;
animation-fill-mode:both;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: 0.1s;
}
.list-item > div {
padding: 12px 16px;
border-radius: 50px;
background: #EFEFEF;
transition:1s all;
}
.list-item:hover > div {
background-color: yellow;
transform: translateY(-5px);
}
#keyframes popin {
0%{
transform:scale(0);
}
50%{
transform:scale(1.1);
}
}
<div class="list">
<div class="list-item"><div>item</div></div>
<div class="list-item"><div>item</div></div>
<div class="list-item"><div>item</div></div>
<div class="list-item"><div>item</div></div>
<div class="list-item"><div>item</div></div>
<div class="list-item"><div>item</div></div>
</div>
I was actually facing a similar problem the other day. I can't tell you why it behaves like this but I can tell you how I solved it. I created another animation and activated it on hover. I used animation-fill-mode: forwards so the animation would only go back to its initial state after you hover somewhere else.
Give it a try and let me know what you think.
.list {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px 0;
}
.list-item {
cursor: pointer;
margin-bottom: 14px;
padding: 12px 16px;
border-radius: 50px;
border-color: black;
border: 1px solid black;
background: #EFEFEF;
animation-name: popin;
animation-fill-mode: both;
animation-duration: .6s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-delay: 0.1s;
}
.list-item:hover {
animation: pull-up 0.3s ease-in-out forwards;
background-color: yellow;
}
#keyframes popin {
0%{
transform:scale(0);
}
50%{
transform:scale(1.1);
}
100%{
transform:scale(1);
}
}
#keyframes pull-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
<div class="list">
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
<div class="list-item">item</div>
</div>
been working and learning to build this page for about 4-5 hours and I cannot seem to find out why I am unable to get the navigation links on the same line as the navbar-logo and secondly is there any way I could make this code more efficient and less dependent/error-prone?
One more thing I wanted to ask is can we use flexbox in this webpage? and is CSS animation used is efficient here?
body{
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header{
width: 100%;
height: 10%;
margin: auto;
}
.navbar-logo{
padding: 2px 0px 2px 100px;
position: absolute;
z-index: 100;
}
.navbar-logo-sub{
padding: 55px 0px 0px 200px;
}
#logo-main{
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 40px;
font-weight: 800;
margin: 0;
}
.parenthesis1{
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2{
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub{
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image{
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text{
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
nav{
padding: 0px 0px 0px 60%;
}
li{
float: left;
margin-right: 100px;
list-style-type: none;
}
a{
text-decoration: none;
color: white;
}
h1{
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2){
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3){
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4){
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5){
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6){
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7){
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8){
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9){
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0%{
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100%{
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0%{
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100%{
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0%{
opacity: 0.0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
</div>
<div class="navbar-logo-sub"><p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color: #787878"><script></span>}</p></div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text"><h1>Your</h1><h1>web development</h1>
<h1>develops</h1><h1>here.</h1></div>
</div>
</section>
</body>
</html>
Here you go brother, I added a div with class="navbar-wrapper" and placed the header elements inside it. I used the display:inline-block on the header elements so that they are horizontally aligned. For the navbar-logo-sub, I placed it inside the navbar-logo and used position:absolute, and bottom:0 to place it at the bottom of the parent element. Run Code snippet and view it on full page.
body {
background-color: #000;
color: #f1f1f1;
animation: fade-in 2s 1;
}
header {
width: 100%;
}
.navbar-wrapper{
padding-left:50px; padding-right:50px;
}
header .navbar-logo {
display: inline-block;
position: relative;
}
header nav {
display: inline-block;
}
header .navbar-logo-sub {
display: block;
position: absolute;
bottom: 0;
left: 20%;
}
nav {
padding: 0px;
margin: 0px;
}
header li {
float: left;
margin-right: 50px;
list-style-type: none;
}
header li:last-of-type {
margin-right: 0px;
}
a {
text-decoration: none;
color: white;
}
#logo-main {
font-family: 'Didact Gothic', sans-serif;
color: white;
font-size: 2.3em;
font-weight: 800;
margin: 0;
}
.parenthesis1 {
color: #b22121;
font-family: 'Bungee', cursive;
}
.parenthesis2 {
color: #787878;
font-family: 'Bungee', cursive;
}
#logo-sub {
color: white;
font-size: 14px;
font-weight: 20;
font-family: 'Coming Soon', cursive;
}
#banner-image {
width: 50%;
padding-left: 20%;
filter: blur(3px);
position: relative;
padding-top: 5%;
}
#banner-text {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
font-size: 50px;
text-align: left;
}
h1 {
margin-top: 0px;
margin-bottom: -50px;
font-family: 'Permanent Marker', cursive;
font-weight: 300;
text-shadow: 4px 2px rgba(238, 238, 238, 0.5);
opacity: 0;
-webkit-animation: slide-in 3s 1 forwards;
}
div h1:nth-of-type(2) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
div h1:nth-of-type(3) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
div h1:nth-of-type(4) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
div h1:nth-of-type(5) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
div h1:nth-of-type(6) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
div h1:nth-of-type(7) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
div h1:nth-of-type(8) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
div h1:nth-of-type(9) {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#keyframes slide-in {
0% {
transform: rotateY(90deg) translateY(-50%);
opacity: 0.0;
}
100% {
transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#-webkit-keyframes slide-in {
0% {
-webkit-transform: rotateY(90deg) translateY(25%);
opacity: 0.0;
}
100% {
-webkit-transform: rotateY(0deg) translateY(0%);
opacity: 1.0;
}
}
#keyframes fade-in {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
<html>
<head>
<title>.whatsthecode.</title>
<link href="https://fonts.googleapis.com/css?
family=Didact+Gothic|Coming+Soon|Bungee|Permanent+Marker" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="navbar-logo">
<p id="logo-main">WhatsTheCode<span class="parenthesis1">(</span>
<span class="parenthesis2">)</span></p>
<div class="navbar-logo-sub">
<p id="logo-sub">{<html><span style="color: #b22121"><style></span><span style="color:
#787878"><script></span>}</p>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="banner">
<img src="banner-background.png" id="banner-image">
<div id="banner-text">
<h1>Your</h1>
<h1>web development</h1>
<h1>develops</h1>
<h1>here.</h1>
</div>
</div>
</section>
</body>
</html>
I write my code like this: https://jsfiddle.net/9dgjkc9r/
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
<div class="question"></div>
But it doesn't have a fade in and fade out because when I move the mouse in another position it's displayed an ugly movement. I don't know how to add them.
Just start the transition from the initial position and break the transition down into 4 keyframes like so:
0% {
-webkit-transform: rotate(0deg)
}
25% {
-webkit-transform: rotate(-3deg)
}
75% {
-webkit-transform: rotate(3deg)
}
100% {
-webkit-transform: rotate(0deg)
}
Here is the JSFiddle demo
(At least what I understood u wanted :) )
is this what you want.copy full code and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
$("div.question").mouseenter(function(){
$(this).fadeOut(1000).fadeIn(1000);
});
});
</script>
</body>
</html>
or if you want to do fadein and out infinite time, then try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.question{
display: inline-block;
position: absolute;
width: 250px;
height: 50px;
background: #272822;
box-shadow: 0.5px 0.5px 5px #000000;
text-align: center;
}
.question:hover{
-moz-animation: 3s ease 0s normal none swing;
-moz-transform-origin: center top;
-webkit-animation:swing 3s ease-in-out;
-webkit-transform-origin:top;
}
#-moz-keyframes swing{
0%{-moz-transform:rotate(-3deg)}
50%{-moz-transform:rotate(3deg)}
100%{-moz-transform:rotate(-3deg)}
}
#-webkit-keyframes swing{
0%{-webkit-transform:rotate(-3deg)}
50%{-webkit-transform:rotate(3deg)}
100%{-webkit-transform:rotate(-3deg)}
}
</style>
<body>
<div class="question"></div>
<script type="text/javascript">
$(document).ready(function(){
check(1000);
});
function check(i)
{
$(".question").fadeOut(1000).fadeIn(1000);
setTimeout("check()",i);
}
</script>
</body>
</html>