<!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);
Related
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>
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 an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()
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>
I'm expecting to see some animation on the circle. I doesn't! The circle remains stationary on page load. I've tried it in FF and Chrome. As far as I know the syntax is correct?
<!doctype html>
<html>
<head>
<title>CSS animations</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#balloon-one {
background:yellow;
border-radius:50px;
border:2px solid #FFCC00;
position:absolute;
height:100px;
width:100px;
top:200px;
left:300px;
-webkit-animation: floataround 5s infinite;
}
#-webkit-keyframes float {
0% { -webkit-transform: translateX(-20px) translateY(10px); }
30% { -webkit-transform: translateX(10px) translateY(-20px); }
70% { -webkit-transform: translateX(-10px) translateY(20px); }
100% { -webkit-transform: translateX(-20px) translateY(10px); }
0% { -moz-transform: translateX(-20px) translateY(10px); }
30% { -moz-transform: translateX(10px) translateY(-20px); }
70% { -moz-transform: translateX(-10px) translateY(20px); }
100% { -moz-transform: translateX(-20px) translateY(10px); }
}
</style>
</head>
<body>
<div id="balloon-one"></div>
</body>
</html>
help
I can see several errors in your code. First your animation is set to "floataround", but your animation name is juste "float". Then you mixed up -moz and -webkit prefixes. Here is a corrected version of your css:
#balloon-one {
background:yellow;
border-radius:50px;
border:2px solid #FFCC00;
position:absolute;
height:100px;
width:100px;
top:200px;
left:300px;
-webkit-animation: float 5s infinite;
-moz-animation: float 5s infinite;
animation: float 5s infinite;
}
#-webkit-keyframes float {
0% { -webkit-transform: translateX(-20px) translateY(10px); }
30% { -webkit-transform: translateX(10px) translateY(-20px); }
70% { -webkit-transform: translateX(-10px) translateY(20px); }
100% { -webkit-transform: translateX(-20px) translateY(10px); }
}
#-moz-keyframes float {
0% { -moz-transform: translateX(-20px) translateY(10px); }
30% { -moz-transform: translateX(10px) translateY(-20px); }
70% { -moz-transform: translateX(-10px) translateY(20px); }
100% { -moz-transform: translateX(-20px) translateY(10px); }
}
#keyframes float {
0% { transform: translateX(-20px) translateY(10px); }
30% { transform: translateX(10px) translateY(-20px); }
70% { transform: translateX(-10px) translateY(20px); }
100% { transform: translateX(-20px) translateY(10px); }
}
Tried on chrome, it works. Not tried with firefox.