well I`m trying to attempt a rotation on a img that i have
#cometa {
width: 200px;
position: fixed;
top: 20px;
right: 20px;
animation: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
with this example that i got from here
CSS3 Rotate Animation
But i want to the planet to rotate in its axys, this way it's rotating all over the place, what can i do the make it rotate diferently?
Animation name is missing in your code.
I hope it will help you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
#cometa{
width: 200px;
position: fixed;
top: 100px;
right: 200px;
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}</style>
<title>Document</title>
</head>
<body>
<div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>
[UPDATED]
Below solution is for 3d rotation.
Click on full page if result isn't visible.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
#cometa{
width: 200px;
position: fixed;
top: 200px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotateY(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotateY(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}</style>
<title>Document</title>
</head>
<body>
<div id="cometa"><img src="https://cdn.pixabay.com/photo/2022/08/19/09/05/volcano-7396466_960_720.jpg" width="200px"></div>
</body>
</html>
Related
I am trying to have the text only pulse in the center of the page I do not want it ever at the top
I have played around with the scale
CSS......
.Lum{
font-family: Edwardian Script ITC;
position: fixed;
top: 50%;
left: 50%;
font-size: 50px;
text-align: center;
transform: translate(-50%, -50%);
margin: 0;
letter-spacing: 1px;}
#keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
}
HTML..............
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body class="pulse">
<h3 class="Lum">Lumiere</h3>
</body>
</html>
I want the text always in the middle of the page never at the top
What you should do to fix the animation on current approach:
.Lum{
font-family: Edwardian Script ITC;
position: fixed;
top: 50%;
left: 50%;
font-size: 50px;
text-align: center;
transform: translate(-50%, -50%);
margin: 0;
letter-spacing: 1px;}
#keyframes pulse {
/* Since you're using translate, you shouldn't overwrite it with only scale, just combine them */
0% {transform: translate(-50%, -50%) scale(1);}
50% {transform: translate(-50%, -50%) scale(1.1);}
100% {transform: translate(-50%, -50%) scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
/* If you want the animation keeps going */
animation-iteration-count: infinite;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body>
<!-- You need to put pulse on the element, not the whole page -->
<h3 class="Lum pulse">Lumiere</h3>
</body>
</html>
Since you're using the transform for animation, maybe translate approach for centering is not very ideal. Maybe try this approach instead:
body {
/* Make the container flexbox */
display: flex;
/* Center its children */
justify-content: center;
align-items: center;
/* set the width and height as big as the window */
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.Lum{
font-family: Edwardian Script ITC;
font-size: 50px;
text-align: center;
margin: 0;
letter-spacing: 1px;
}
#keyframes pulse {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
/* If you want the animation keeps going */
animation-iteration-count: infinite;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Lumiere</title>
</head>
<body>
<h3 class="Lum pulse">Lumiere</h3>
</body>
</html>
I would like to rotate a div when the cursor is on the div like in this video.
I would like to use keyframes because they are more customizable
div.myElement {
...
animation: mainMenu 2s infinite;
animation-play-state: initial;
}
div.myElement:hover {
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
It doesn't work but i don't know what I need to put in my div.myElement and div.myElement:hover. In div.Element, it is 0% to 100% and 100% to 0% for div.Element:hover.
I have an animation of a box, like you code sample
https://jsfiddle.net/gnox69pv/5/
HTML
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
CSS
div.myElement {
background-color: red;
height: 100px;
width: 100px;
margin:10px;
animation: change_width_back 0.7s forwards;
}
div.myElement:hover {
animation: change_width 0.7s forwards;
}
#keyframes change_width {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#keyframes change_width_back {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(0deg);
}
}
try this:
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
transform: rotate(0deg);
animation-play-state: initial;
}
div.myElement:hover {
animation: mainMenu 2s infinite;
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
and if you want the box will stay in the same stage use this:
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
animation: mainMenu 2s infinite;
animation-play-state: paused;
}
div.myElement:hover {
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
I have a CSS animation on 3 boxes (Flexboxes) that transition from off screen to in position using transforms, however whenever I resize the window these boxes space out away from each other and move away from their intended positioning (they should be overlapping). How do I make these boxes stay in place? Or, if that is not possible, how can I remove the transforms to return them back to staying within one row but extending the full width of the screen ?
index.scss
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.container > div {
width: 30vw;
height: 80vh;
box-sizing: border-box;
border: solid 2px black;
&:nth-child(1) {
animation-name: scrollinRight;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: red;
}
&:nth-child(2) {
animation-name: scrollinTop;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: rgb(120, 107, 133);
z-index: 2;
}
&:nth-child(3) {
animation-name: scrollinLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
background: green;
}
}
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(100vh);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-100vh, 10%);
}
}
#keyframes scrollinTop {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(5%);
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
You could try to use percentage in your keyframes for the translateX
DEMO
#keyframes scrollinRight {
0% {
transform: translateX(-100vh);
}
100% {
transform: translateX(150%);
}
}
#keyframes scrollinLeft {
0% {
transform: translate(100vh, 100vh);
}
100% {
transform: translate(-150%, 10%);
}
}
I am trying to get marquee effect using css3. Its working along X axis but i wanted it to work along Y axis ie Bottom to top. Here is my code
Index.html:
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="marquee">
<span>Hi I m ur marquee!!</span>
</h1>
</body>
</html>
Css
#keyframes marquee {
0% { -webkit-transform: translate(0,0); }
100% { -webkit-transform:translate(-100%,0); }
}
#-webkit-keyframes marquee {
0% { -webkit-transform: translate(0,0); }
100% { -webkit-transform:translate(-100%,0); }
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}`
If I understood you correctly you need to change -webkit-transform:translate(x,y); y value for continuous effect I have changed 100% to 50% and set the height to 100%
html,
body,
h1 {
height: 100%
}
#-webkit-keyframes marquee {
0% {
-webkit-transform: translate(0, 0%);
}
25% {
-webkit-transform: translate(0, -30%);
}
26% {
opacity:0;
-webkit-transform: translate(0, 110%);
}
27% {
opacity:1;
-webkit-transform: translate(0, 110%);
}
100% {
-webkit-transform: translate(0, 0%);
}
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
-webkit-animation: marquee 5s linear infinite;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
`
<h1 class="marquee">
<span>Hi I m ur marquee!!</span>
</h1>
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<style>
#font-face {
font-family: fedra_sans_armdemi;
src: url('fedrasansarm-demi.ttf');
}
body {
overflow: hidden;
text-align: center;
}
.bmper {
-webkit-animation: bmp .7s normal;
-webkit-animation-fill-mode:forwards;
-moz-animation: bmp .7s normal;
-moz-animation-fill-mode:forwards;
font-size: 500px !important;
-webkit-transform: scale(1);
-moz-transform: scale(1)
}
#you_lose, .kochum {
font-family: fedra_sans_armdemi;
color: rgb(77, 0, 0);
font-size: 72px;
}
#-webkit-keyframes bmp {
from{
-webkit-transform: scale(1000);
opacity: 0;
}
to{
-webkit-transform: scale(1);
opacity: 1;
}
}
#-moz-keyframes bmp {
from{
-moz-transform: scale(1000);
opacity: 0;
}
to{
-moz-transform: scale(1);
opacity: 1;
}
}
</style>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
window.onload = function(e){
setTimeout(function(){lose()}, 1000);
}
function lose() {
document.getElementById("lose_sound").play();
document.getElementById("you_lose").className="bmper";
}
</script>
</head>
<body onselectstart="return false;"><p>
<b class="kochum">New title</b><p>
<b id="you_lose" style="opacity: 0">π</b><p>
<audio src="lose_text.mp3" id="lose_sound"></audio>
</body>
</html>
This is my code and it's mozilla transform animation in -moz-animation is not working. I have written using using JSBin and then downloaded it. What can I do to make it working? I don't know what to write...
Maybe try closing this
-moz-transform: scale(1)
like this
-moz-transform: scale(1);