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>
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>
The <marquee> tag is depreciated, so I am trying to implement a marquee with CSS (following this tutorial). Below is my HTML & CSS, and when you run it, you'll notice the website starts out as super wide with a scroll bar at the bottom, and the width of the website slowly decreases till the bar disappears. It also goes outside of the <div> block element.
How do I fix it so that it starts and finishes at the edges of the <div> block element without altering the width of the site?
.marquee{
background-color: black;
color: blue;
font-size: 3em;
margin-top: 2rem;
}
.myMarquee{
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: marqueeAnimation 15s linear infinite;
-webkit-animation: marqueeAnimation 15s linear infinite;
animation: marqueeAnimation 15s linear infinite;
}
#-moz-keyframes marqueeAnimation {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes marqueeAnimation {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes marqueeAnimation {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<!DOCTYPE html>
<html>
<head>
<link href = "index.css" rel = "stylesheet" type = "text/css" />
<meta charset = "utf-8" />
<title>Mainpage</title>
</head>
<body>
<div class="marquee">
<p class = "myMarquee">Scrolling Text</p>
</div>
</body>
</html>
Below is one way you could go about resolving the overflow issue you describe. The only real CSS properties of interest in this case are the max-width and overflow properties applied to the parent container.
max-width: 100% prevents your container from running beyond it's bounds and overflow: hidden clips the content so no scrollbars appear.
.marquee {
max-width: 100%;
overflow: hidden;
}
.marquee {
max-width: 100%;
overflow: hidden;
margin: 2rem auto;
font-size: 3em;
color: blue;
background-color: black;
}
.marquee__items {
display: flex;
align-items: center;
}
.marquee__item {
flex-grow: 0;
flex-shrink: 0;
margin: 0;
padding: 0 2rem;
list-style: none;
}
.marquee__item {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
-webkit-animation: marqueeAnimation 15s linear infinite;
-moz-animation: marqueeAnimation 15s linear infinite;
animation: marqueeAnimation 15s linear infinite;
}
#-moz-keyframes marqueeAnimation {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes marqueeAnimation {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes marqueeAnimation {
0% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<section class="marquee">
<ol class="marquee__items">
<li class="marquee__item">Scrolling Text 01</li>
<li class="marquee__item">Scrolling Text 02</li>
</ol>
</section>
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>
At the moment I have a CSS autoscrolling text that looks like this:
.vscroll {
position: absolute;
height: auto;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 25s linear infinite;
-webkit-animation: scroll-up 25s linear infinite;
animation: scroll-up 25s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
This works, but it does look a bit choppy on some devices. So I am hoping it is possible to do something like this but with only CSS instead of jQuery: https://www.jqueryscript.net/demo/Vertical-Text-Scrolling-Plugin-With-jQuery-scrollText-js/
Is it possible?
Hope this will help (Sample).
<!DOCTYPE html>
<title>Example</title>
<!-- Styles -->
<style>
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
font-size: 3em;
color: limegreen;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>
<!-- HTML -->
<div class="example1">
<h3>Scrolling text... </h3>
</div>
I'm not sure how to describe it, so look at this example:
$('button').on('click', () => {
$('.spinner').addClass('paused');
});
.spinner {
}
.spinner > div {
width: 25px;
height: 25px;
background-color: #9f9f9f;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.paused > div {
-webkit-animation: sk-pause 1.4s 1 ease-in-out both;
animation: sk-pause 1.4s 1 ease-in-out both;
// -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
// animation-play-state: paused;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.3) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes sk-pause {
80%, 100% {transform: scale(0.3)}
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
transform: scale(0.3);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<button> Click </button>
You have three balls, that are bouncing. When you click the button it adds a class paused, which animates to the smallest visible ball. But when you click, they all come from 1.0 scale to 0.3 scale. I would like that they transition from their previous state to 0.3.
Please see this:
<head>
<title></title>
<style>
.spinner {
}
.spinner > div {
width: 25px;
height: 25px;
background-color: #9f9f9f;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.paused > div {
-webkit-animation: sk-pause 1.4s 1 ease-in-out both;
animation: sk-pause 1.4s 1 ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
}
40% {
-webkit-transform: scale(1.0);
}
}
#keyframes sk-pause {
80%, 100% {
transform: scale(0.3);
}
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="spinner">
<div id="div1" class="bounce1"></div>
<div id="div2" class="bounce2"></div>
<div id="div3" class="bounce3"></div>
</div>
<input type="button" id="a" value="Pause" />
<script>
$('#a').click(function ()
{
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle2 = window.getComputedStyle(document.getElementById("div2"));
var computedStyle3 = window.getComputedStyle(document.getElementById("div3"));
$('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform);
$('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform);
$('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform);
$('.spinner').addClass('paused');
});
</script>
</body>
I do not know what is React but I think the code must be some think like this (instead of $('#a').click(function ().... block code):
$('#a').on('click', () => {
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle2 = window.getComputedStyle(document.getElementById("div2"));
var computedStyle3 = window.getComputedStyle(document.getElementById("div3"));
$('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform);
$('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform);
$('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform);
$('.spinner').addClass('paused');
});