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>
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 stumbled across this website that lists CSS button animations. I have linked it --> https://buttonanimations.github.io/ I don't know if its just me but when I try to implement the animations into my website (Copy and paste) they just break. Is it on their end or mine, maybe they didn't input the animations correctly into the website.
(Currently using Safari) (I mean it should work right?)
The animations can be used by clicking on the animation on the page, copying the value:
.button_name:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.button_name { width: 300px; height: 45px; background-color: #cccccc; }
and putting the code in a stylesheet or <style> element.
Note that the .button_name selector should be replaced by the class(such as hover_button) that the element has when putting the code in a file or style element:
<button class="hover_button">Test</button>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hover_button:hover{ color: blue; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); animation-duration: 1s; transition-duration: 1s; transition-property: 1s; }
.hover_button { width: 300px; height: 45px; background-color: #cccccc; }
</style>
</head>
<body>
<button class="hover_button">Test</button>
</body>
</html>
So, you could do that but for me personally, I think the easiest way to do this would be to use the animation attribute in the section. Here is an example:
#popoutbutton {
font-family: 'Nanum Gothic', sans-serif;
border: 3px solid #666;
background-color: black;
cursor: pointer;
color: white;
transition: background-color 300ms ease-out 100ms;
}
#popoutbutton:hover {
background-color: grey;
}
<a
target="popup" onclick="window.open('WEBSITEURLHERE','popup','width=400,height=600'); return false;">
<button id="popoutbutton">Pop Out</button>
</a>
This, at least for me personally, is the easiest way to do this.
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 made this transform thing, and now i want it to start with being: transform: rotateX(15deg) rotateY(180deg); and then transform to normal(so it is doing it conversely), is that possible and how?
<html>
<head>
<title>Tester</title>
<meta charset="UTF-8">
<style type="text/css" >
div{
border-style: solid;
width: 350px;
height: 400px;
margin-top: 50px;
margin-left: 512px; }
p{
float: left;
font-size: 90px;}
.effect1
{
-moz-transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
</style>
</head>
<body>
<div>
<p>some text</p>
</div>
<button>Magic</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function(){
box = $("div");
box.addClass('effect1');
});
</script>
</body>
Just add the transformations to the basic CSS, then set them to 0 for the effect class.
div{
border-style: solid;
width: 350px;
height: 400px;
transition-duration: 2s;
transform: rotateX(15deg) rotateY(180deg);}
p {
float: left;
font-size: 90px;}
.effect1
{
transition-duration: 2s;
transform: rotateX(0deg) rotateY(0deg);}
jsFiddle Expample
You can also make the button flip the box back and forth by using toggleClass in the jQuery: sample
I created a CSS 3D Transformation for a logo div within a header of my page. On hover the logo gets rotated. Everything looks fine in Chrome, but Firefox renders it completely different.
I moved the transform origin to the left side of the logo div. When rotating the right side of the div gets "compressed" to get the visual 3D effect. In Firefox the logo div only gets smaller but not "compressed" and you can't see a 3D effect.
The Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
#header {
width: 940px;
margin: auto;
background-color: blue;
height: 350px;
position: relative;
-webkit-perspective: 800;
-moz-perspective: 800;
}
#logo {
width: 300px;
height: 80px;
background-color: red;
position: absolute;
top: 50px;
left: 0px;
-webkit-transition-duration: 0.25s;
-webkit-transform-origin: 0% 50%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate3d(0,1,0,0deg);
-moz-transition-duration: 0.25s;
-moz-transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
-moz-transform: rotate3d(0,1,0,0deg);
}
#logo:hover {
-webkit-transition-duration: 0.5s;
-webkit-transform: rotate3d(0,1,0,45deg);
-moz-transition-duration: 0.5s;
-moz-transform: rotate3d(0,1,0,45deg);
}
</style>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>
</body>
</html>
Please try the following JSFiddle: http://jsfiddle.net/4CN5g/
Any idea what I'm doing wrong?