Whenever I hover on the first image, it moves to a different location. That is supposed to happen. But it comes back to it's original spot after un-hover. I need it to stay in the end location. If you understood that, can you help? Thanks in advance.`
I tried to have the code animation infinite, but that doesn't seem to work.
<html style="overflow: hidden;">
<meta name="viewport" content="width=device-width">
<head>
<script>
window.start();
function start(){
alert("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.");
console.log("This site is secure with SITELOCK TM. If this Website is hacked, the record will be loggled, and will be reported.")
}
</script>
<style>
#keyframes slide{
0%{
width: 50px;
}
100%{
width: 300px;
}
}
#keyframes fly{
0%{
top: 25;
left: 17;
width: 20;
}
100%{
top: 157;
left: 30;
}
}
#keyframes fade{
from{opacity: 0;}
to{opacity: 1;}
}
#keyframes fade2{
from{opacity: 0;}
to{opacity: 1;}
}
#keyframes goaway{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.nav:hover{
animation: slide 2s forwards;
}
.nav:hover > center > #home{
animation: fade2 2s forwards;
}
.nav:hover > center > #about{
animation: fade 2s forwards;
}
.nav:hover > #rocket{
animation: fly 2s forwards;
}
.nav:hover > #title{
animation: fade 7s forwards;
}
.nav:hover > center > #shop{
animation: fade 3s forwards;
}
.nav:hover > #menu_mark{
animation: goaway 1s forwards;
}
#image1:hover{
animation: move1 0.5s infinite;
}
#keyframes move1{
0%{
width: 160px;
top: 70px;
left: 200px;
}
50%{
width: 180px;
top: 50px;
left: 400px;
}
100%{
width: 200px;
top: 30px;
left: 600px;
}
}
#image1:hover ~ #image2{
animation: move2 0.5s infinite;
}
#keyframes move2{
0%{
left: 400px;
width: 180px;
top: 50px;
}
50%{
left: 600px;
width: 200px;
top: 30px;
}
100%{
width: 180px;
top: 50px;
left: 820px;
}
}
#image1: ~ #image3{
}
#image1:hover ~ #image4{
}
#image1:hover ~ #image5{
}
</style>
<script>
</script>
</head>
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Thasadith" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<body style=" align-content: center; margin: 0; padding: 0; background-color: #404040; overflow-y: hidden;">
<div class="elements">
<img src="Image%201.png" id="image1" style="width: 160px; position: absolute; top: 70px; left: 220px; border-radius: 10px;">
<img src="Image%202.png" id="image2" style="width: 180px; position: absolute; top: 50px; left: 400px; border-radius: 10px;">
<img src="Image%203.png" id="image3" style="width: 200px; position: absolute; top: 30px; left: 600px; border-radius: 10px;">
<img src="Image%204.png" id="image4" style="width: 180px; position: absolute; top: 50px; left: 820px; border-radius: 10px;">
<img src="Image%205.png" id="image5" style="width: 160px; position: absolute; top: 70px; left: 1015px; border-radius: 10px;">
</div>
<div class="nav" style="background-color: #282829; height: 800px; width: 50px; box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.4); margin-bottom: 10px; position: sticky; float: left;" >
<span id="title" style="display: inline-block; font-family: Thasadith; color: white; font-size: 40px; position: absolute; top: 150; left: 60px; opacity: 0;">MONOSPACE</span>
<center><span id="home" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; padding-top: 250px; opacity: 0;">HOME</span><br>
<span id="about" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">ABOUT</span><br>
<span id="shop" style="display: inline-block; padding-bottom: 25px; font-family: Fjalla One; color: white; font-size: 20px; opacity: 0;">SHOP</span><br></center>
<img id="menu_mark" src="LogoMakr_6Pr2go.png" style="width: 25px; position: absolute; top: 300px; left: 12.5px;">
<img id="rocket" src="LogoMakr_9Pl0y8.png" style="color: white; position: absolute; top: 25; left: 17; width: 20;">
</div>
</body>
</html>
You need two things. Firstly use forwards in the animation rather than infinite which is going to infinitely loop your animation. Secondly you need to maintain state. As soon as you mouse away that end state of the animation is lost and will repeat on re-hover. To avoid this use javascript to add a class on hover, this will handle the state for you.
const image = document.getElementById("image1");
const onHover = (e) => {
event.target.classList.add("hovered");
console.log('image hovered');
event.target.removeEventListener("mouseenter", onHover)
};
image.addEventListener("mouseenter", onHover)
#image1 {
width: 100px;
height: 100px;
background: blue
}
#image1.hovered {
animation: move1 0.5s forwards;
}
#keyframes move1{
0%{
width: 160px;
top: 70px;
left: 200px;
}
50%{
width: 180px;
top: 50px;
left: 400px;
}
100%{
width: 200px;
top: 30px;
left: 600px;
}
}
<div id="image1">
</div>
Try adding a timing for your animation:
.nav:hover > center > #home{ animation: fade2 2s ease-in-out forwards; }
I never use to/from, I always use 0%/100% you can do more things in that way.
Tell me if it works because I use my keyframes like this.
Related
body {
background-color: gray;
width: 1024;
height: 768;
}
#Login {
background-color: blue;
height: 50px;
width: 190px;
position: relative;
top: 550px;
left: 650px;
}
#pLogin {
font-size: 42px;
padding-left: 35px;
font-family: Arial, Helvetica, sans-serif;
}
#IDiscord {
position: relative;
top: 85px;
left: 550px;
width: 405px;
height: 360px;
}
#ITwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: idITwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: paused;
}
.IMTwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: classIMTwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
#keyframes idITwitter {
0% {
bottom: 400px;
left: 700px;
}
95% {
bottom: 106px;
}
}
#keyframes classIMTwitter {
0% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
100% {
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Maniac</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/Animation/Animation.css">
<script type='text/javascript' src='../Javascript/Animation/wow.js'></script>
</head>
</html>
<body>
<div id="Login">
<Log id="pLogin">Log in</p>
</div>
<div>
<img id="IDiscord" src="../img/Hindex/Discord_outline.png">
</div>
<div>
<img id="ITwitter" class="IMTwitter" src="../img/Hindex/Twitter.png">
</div>
</body>
Im trying to code the main page of a website Im creatig and Im trying to achieve a fall animation in css and then im trying to rotate an image. I realize that there probaly are better ways to do this, but this should work, shouldnt it. Any help would be greatly appreciated. There may be a simple souloution i overlooked or a typo of some sort(or my brain doesnt work)but yea, i think that css should defintly work.
Since both id and class refer to the same img you can omit the class and add on the animation property the two animations like this:
#ITwitter {
...
animation-name: idITwitter, classIMTwitter;
...
}
Working snippet:
body {
background-color: gray;
width: 1024;
height: 768;
}
#Login {
background-color: blue;
height: 50px;
width: 190px;
position: relative;
top: 550px;
left: 650px;
}
#pLogin {
font-size: 42px;
padding-left: 35px;
font-family: Arial, Helvetica, sans-serif;
}
#IDiscord {
position: relative;
top: 85px;
left: 550px;
width: 405px;
height: 360px;
}
#ITwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: idITwitter, classIMTwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
/* animation-play-state: paused;*/
}
#keyframes idITwitter {
0% {
bottom: 400px;
left: 700px;
}
95% {
bottom: 106px;
}
}
#keyframes classIMTwitter {
0% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
100% {
}
}
<div id="Login">
<Log id="pLogin">Log in</p>
</div>
<div>
<img id="IDiscord" src="../img/Hindex/Discord_outline.png">
</div>
<div>
<img id="ITwitter" src="https://www.matrixgroup.net/snackoclock/wp-content/uploads/2012/07/twitter-bird-light-bgs.png">
</div>
So I'm trying to somehow do two animations on one element but I can't be able to fix it.
Here is a jsfiddle which includes only the important things. For the full picture, check here. I want to make the alien which represents the letter L coming in from the right to left (= the position where he is now at).
So what I want to get is that the alien moves from right to left, but together with the moving legs, and the image of the alien.
I will explain some of the code.
HTML:
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
.monster_L represents the image of the alien
.Benen_L represents the legs (=benen)
CSS
/*Monster L*/
.monster_L img {
position: absolute;
bottom: 296px;
left: 596px;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
bottom: 293px;
left: 597px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
bottom: 286px;
left: 605px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 613px;
}
/*Been4*/
.B_4 {
left: 621px;
}
#keyframes animation_B_1 {
0%{ bottom: 293px; }
50% { bottom: 286px; }
100%{ bottom: 293px; }
}
#keyframes animation_B_2 {
0%{ bottom: 286px; }
50% { bottom: 293px; }
100%{ bottom: 286px; }
}
You have to apply position: absolute to letter_L and apply a keyframe to it for its translation with the right property.
However when you apply position: absolute or position: relative to letter_L, all position: absolute elements inside are not going to be relative to letter_L. So you have change the top, bottom, left coordinates accordingly.
I have tried to solve this for you.
Check updated fiddle.
Refer code:
.letter_L {
width: 100px;
position: absolute;
/* z-index: 100000000; */
height: 90px;
animation-name: moveRTL;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Monster L*/
.monster_L img {
position: absolute;
top: 0;
left: 0;
z-index: 50;
opacity: 1;
width: 70px;
}
/*Been1*/
.B_1 {
position: absolute;
top: 32px;
left: 0;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_1;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been2*/
.B_2 {
position: absolute;
top: 32px;
left: 8px;
z-index: 40;
opacity: 1;
width: 8px;
height: 50px;
background-color: #297f40;
border-radius: 0 0 15px 15px;
animation-name: animation_B_2;
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*Been3*/
.B_3 {
left: 16px;
}
/*Been4*/
.B_4 {
left: 24px;
}
#keyframes animation_B_1 {
0% {
top: 28px;
}
50% {
top: 32px;
}
100% {
top: 28px;
}
}
#keyframes animation_B_2 {
0% {
top: 32px;
}
50% {
top: 28px;
}
100% {
top: 32px;
}
}
#keyframes moveRTL {
0% {
right: 0;
}
100% {
right: 200px;
}
}
<!-- L letter -->
<div class="letter_L">
<div class="monster_L">
<img src="http://googledoodle.lucasdebelder.be/images/l/monster.png">
</div>
<div class="benen_L">
<div class="B_1"></div>
<div class="B_2"></div>
<div class="B_1 B_3"></div>
<div class="B_2 B_4"></div>
</div>
</div>
I have created a ripple effect in this circle. Everything looks great, but I want that this effect happen more often. It takes to long time for the other wave to appear when the other is gone. I tried to increase the animation speed, but it doesn't look good:
Here is what I've done so far:
.pulse {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
animation: ring-1 2s ease-out infinite
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse" style="left: 0px; top: 0px;"></div>
</div>
Something like this? Add more ripple's and delay the start of animation by 0.5s, 1s, 1.5s and 2s respectively.
Read more about animation delay:
https://developer.mozilla.org/en/docs/Web/CSS/animation-delay
https://css-tricks.com/almanac/properties/a/animation/
.pulse1,
.pulse2,
.pulse3,
.pulse4 {
width: 300px;
height: 300px;
background: #bdebca;
border: 1px solid #b9e8c9;
border-radius: 50%;
z-index: -1;
text-align: center;
position: absolute;
transform: scale(0.1, 0.1);
}
.pulse1 {
animation: ring-1 2s 0.5s ease-out infinite;
}
.pulse2 {
animation: ring-1 2s 1s ease-out infinite;
}
.pulse3 {
animation: ring-1 2s 1.5s ease-out infinite;
}
.pulse4 {
animation: ring-1 2s 2s ease-out infinite;
}
#keyframes ring-1 {
0% {
transform: scale(0.1, 0.1);
opacity: 0
}
50% {
opacity: 1
}
100% {
transform: scale(1.2, 1.2);
opacity: 0
}
}
.ripple-icon .inner {
background-color: lightblue;
color: #fff;
/* animation: pulse 2s infinite; */
}
.icon .inner {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
display: inline-block;
border-radius: 100%;
font-size: 22px;
color: #fff;
text-align: center;
font-weight: 700;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5);
cursor: pointer;
}
.icon {
width: 300px;
height: 300px;
border-radius: 100%;
text-align: center;
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
margin: 0 auto;
left: 50%;
margin-left: -150px;
}
<div class="ripple-icon icon hvr-bounce-in">
<div class="inner">
Ripple
</div>
<div class="pulse1" style="left: 0px; top: 0px;"></div>
<div class="pulse2" style="left: 0px; top: 0px;"></div>
<div class="pulse3" style="left: 0px; top: 0px;"></div>
<div class="pulse4" style="left: 0px; top: 0px;"></div>
</div>
In the .pulse css you can change the animation: ring-1 0.5s ease-out infinite
I have changed the speed from 2s to 0.5s
This is my code:
html
<div id="back">
<div id="right_text">TEST</div>
<div id="left_text">TEST2</div>
</div>
<div id="mid"></div>
css
#mid {
border: 1px solid black;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin:auto;
margin-top:-125px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#back {
width:auto;
height: 150px;
border: 1px solid red;
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
position: static;
}
#-webkit-keyframes rotateY {
from {
-webkit-transform: rotateY(0deg)
}
to {
-webkit-transform: rotateY(360deg)
}
}
#right_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: right;
margin-top: 35px;
text-align: center;
}
#left_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: left;
margin-top: 35px;
text-align: center;
}
http://jsfiddle.net/bXhL8/
As you can see, both text-divs face their back to the screen when they are not on their side of origin. i want both of them to always stay the same and just "hang on" to the rotation of my back-div.
my question would be if that is possible in css alone or if id need js for it.
Add the following to your css
#left_text, #right_text {
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Update
Updated JSFiddle
here is my new bit of code. its not a perfect circle yet, because i just added 4 frames to my #keyframes. im thinking about making a actual circular rotation and adding a skew() element to the whole circular function / to my whole body, don't know if that will work though.
thanks for your help!
html:
<div id="right_text">
<div id="right_text_text">TEST</div>
</div>
<div id="left_text">
<div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>
css:
#mid {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin-top: 105px;
margin-left: 210px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#right_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: downupright linear 8s infinite;
}
#left_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: updownleft linear 8s infinite;
}
#-webkit-keyframes downupright {
0% { left: 490px; top: 150px;}
25% { left: 245px; top: 100px; z-index: -10;}
50% { left: 0px; top: 150px;}
75% { left: 245px; top: 200px; z-index:10;}
100% { left: 490px; top: 150px;}
}
#-webkit-keyframes updownleft {
0% { left: 0px; top: 150px;}
25% { left: 245px; top: 200px; z-index: 9;}
50% { left: 490px; top: 150px;}
75% { left: 245px; top: 100px; z-index: -9;}
100% { left: 0px; top: 150px;}
}
http://jsfiddle.net/bXhL8/4/
This animation is working perfectly in Safari and Chrome, but isn't working in Firefox.
I've tried a few things including -moz prefixes
Can anyone offer me advice on what's wrong here?
Here's the JSFiddle
HTML
<span class="awesome">
<span class="underline"></span>
<span class="underline2"></span>
awesome
</span>
CSS
span.awesome{
position: relative;
}
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
span.underline2{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
opacity: 0.2;
width: 110px;
}
#-webkit-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}
#keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}
The problem was a typo – the last value read 0% instead of 100%
Don't need to specify -moz selectors for CSS3 animations in the latest versions of Firefox, but thanks for your suggestion, #Unykvis
Corrected CSS:
span.awesome{
position: relative;
}
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
span.underline2{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
opacity: 0.2;
width: 110px;
}
#-webkit-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
100%{
width: 0px;
}
}
#keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
100%{
width: 0px;
}
}
Working JSFiddle
You need to add the -moz- to the keyframe animation and also to the selector.
Here is a working example: http://jsfiddle.net/ignaciocorreia/DxZps/4/
CSS:
span.underline{
position: absolute;
top: 30px;
height: 1px;
background-color: black;
-webkit-animation: underline 2s linear infinite;
-moz-animation: underline 2s linear infinite;
animation: underline 2s linear infinite;
}
#-moz-keyframes underline{
0%{
width: 0px;
}
20%{
width: 0px;
}
28%{
width: 110px;
margin-left: 0;
}
36%{
width: 0px;
margin-left: 110px;
opacity: 0.8;
}
0%{
width: 0px;
}
}