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>
Related
the keyframes i created in my scss should be animating my height to make it a 2s animation but it has not done that instead the height is just transforming instantly but the width in the same keyframe is being animated.
#import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght#500&family=Roboto&display=swap");
* {
font-family: "Maven Pro", sans-serif;
color: white;
animation-delay: 1s;
}
body {
width: 100%;
height: 100vh;
margin: 0%;
background-color: green;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
position: absolute;
bottom: 5%;
}
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s 2s;
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
.swipe .side {
width: 180px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
animation-name: imageSize;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
.swipe .side img {
width: 80%;
}
.swipe .center {
position: relative;
animation-name: centerExpand;
animation-fill-mode: forwards;
animation-duration: 0.3s;
width: 74px;
height: 100%;
background-color: #38003c;
display: flex;
justify-content: center;
align-items: center;
}
.swipe .center .popup.firstHalf {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 135px;
height: 35px;
background-color: white;
color: #38003c;
text-align: center;
font-family: "roboto";
font-size: 22px;
line-height: 35px;
font-weight: 500;
animation-name: firstHalf;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 110px;
height: 76px;
background-color: #38003c;
color: #38003c;
display: flex;
align-items: center;
justify-content: center;
animation-name: firstHalf;
animation-delay: 4.8s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports img {
width: 61px;
}
.swipe .center .textContainer {
font-weight: 400;
opacity: 0;
margin: 0% 2% 0% 2%;
height: 100%;
width: 100%;
}
.swipe .center .textContainer.left {
text-align: right;
animation-delay: 1.15s;
animation-name: leftText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center .textContainer.right {
animation-name: rightText;
animation-delay: 1.15s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center img {
width: 44px;
}
#keyframes swipeWidthHeight {
0% {
height: 179px;
width: 434px;
}
100% {
height: 77px;
width: 1064px;
}
}
#keyframes centerExpand {
90% {
justify-content: space-between;
}
100% {
width: 1020px;
justify-content: space-between;
}
}
#keyframes rightText {
0% {
opacity: 1;
}
100% {
padding-left: 10%;
opacity: 1;
}
}
#keyframes leftText {
0% {
opacity: 1;
}
100% {
padding-right: 10%;
opacity: 1;
}
}
#keyframes imageSize {
100% {
height: 77px;
width: 77px;
}
}
#keyframes firstHalf {
0% {
opacity: 1;
bottom: 0%;
z-index: -1;
}
10% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
90% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
99% {
z-index: -1;
opacity: 1;
bottom: 0%;
}
100% {
z-index: -1;
opacity: 0;
bottom: 0%;
}
}
#keyframes close {
100% {
width: 1064px;
height: 77px;
bottom: -20%;
}
}
<body>
<div class="swipe">
<div class="left side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
<div class="center">
<div class="firstHalf popup">First Half</div>
<div class="eaSports popup">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218003415080/ea-sports-logo.png" alt="">
</div>
<div class="textContainer left">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218208907274/premier-league-icon.png" alt="">
<div class="textContainer right">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
</div>
<div class="right side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
</div>
</body>
In the codepen the class "swipe" and key frame of 'swipeWidthHeight'is the element thats is having issues with the height not animating.
here is a codepen below if the whole project for a better understanding
https://codepen.io/charlieschuyler/pen/zYBZzZv
Comma Missing:
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s, 2s; /* missing comma */
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
So I've got two custom mouse cursors that I'd like to keep at all times. The first cursor is a face, and the second is a face with an open mouth, it switches to the second one when the user clicks.
My problem is that when the user hovers over a certain object, like a div class, then the custom cursor disappears and it reverts to the default cursor.
How would I fix this problem?
The code for the cursor is in my CSS document.
Screenshots: https://i.imgur.com/P8ceHUo.jpeg, https://i.imgur.com/HSNLXpb.jpeg, https://i.imgur.com/VUd5BKx.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>
Below the CSS for my default cursor overrides I always use. I added your cursor as an example (can't test if it works, though), modify them to your needs as required.
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
You can use universal selector * to make it work on every :hover element (obviously you will need to just change url for yours):
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO (just click to see the active)
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>
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.
I have a CSS spinner that works everywhere except on iOS Chrome. In iOS Chrome the animation is very jerky and is breaking the intended smooth sequence. Here is the code I have at the moment:
HTML
<div class="spinner">
<span class="child1"></span>
<span class="child2"></span>
<span class="child3"></span>
<span class="child4"></span>
<span class="child5"></span>
<span class="child6"></span>
<span class="child7"></span>
<span class="child8"></span>
</div>
CSS
#keyframes loader {
0% {
background-color: #ffffff;
}
100% {
background-color: transparent;
}
}
.spinner {
border-radius: 100px;
height: 100px;
position: relative;
transform: scale(0.6);
width: 100px;
}
.spinner span {
animation-direction: normal;
animation-duration: 1.04s;
animation-iteration-count: infinite;
animation-name: loader;
background: transparent none repeat scroll 0 0;
border-radius: 50px;
display: inline-block;
height: 16px;
position: absolute;
width: 16px;
}
.spinner span.child1 {
animation-delay: 0.39s;
left: 50%;
margin-left: -8px;
top: 0;
}
.spinner span.child2 {
animation-delay: 0.52s;
left: 71px;
top: 13px;
}
.spinner span.child3 {
animation-delay: 0.65s;
margin-top: -8px;
right: 0;
top: 50%;
}
.spinner span.child4 {
animation-delay: 0.78s;
left: 71px;
top: 72px;
}
.spinner span.child5 {
animation-delay: 0.91s;
bottom: 0;
left: 50%;
margin-left: -8px;
}
.spinner span.child6 {
animation-delay: 1.04s;
left: 13px;
top: 72px;
}
.spinner span.child7 {
animation-delay: 1.17s;
left: 0;
margin-top: -8px;
top: 50%;
}
.spinner span.child8 {
animation-delay: 1.3s;
left: 13px;
top: 13px;
}
I have all the CSS prefixes as well -webkit-, -o-, -ms-...
If anyone can shed some light on where it is I'm going wrong, that'd be great.
http://codepen.io/anon/pen/qdmYaQ
Thanks in advance.
I figured it out! I had 2 animations on the page going off at the same time which was causing a lag. Also see: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/
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/