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>
Related
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>
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 can not play several animations one after the other with a "fluid" effect:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></div>
Am I doing something wrong? I want to keep the keyframes separate.
You may need to consider forwards on the second one to keep its last state because actually when both animations ends your element get back to the inital value of the scale transform which is scale(1) (to be more precise it's transform:none)
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
UPDATE
The waiting time is due to the animation-timing-function used which is ease for both and this mean that you will have an ease-out (slow at the end) and ease-in (slow at the start) which create this behavior of pausing between both animations. If you change the first one to ease-in and the last one to ease-out you won't have this issue.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s ease-in, pulse 0.5s ease-out 1s forwards;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
<div id="circle"></div>
Your pulse animation ends at scale 1.1, and then your circle snaps back to scale 1. Maybe the pulse keyframes should be as follows:
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
In the snippet below you see no snapping, but maybe this isn't the effect you were looking for?
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s, pulse 0.5s ease 1s;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
You need a short pulse at the end when your circle is scaled to 1, this is your fluid effect I presume.
Rather than having to different animations, why don't we tweak the keyframes in the zoomIn animation a little bit.
HTML:
<div id="circle"></div>
CSS:
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 0.4s ease-out;
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Hope this helps.
the only animation is 'Transform', it is best to use a 'timing function' customization, I recommend utilities 'Cubic-bezier' go to this website http://cubic-bezier.com and practice. read before something about bezier curve.
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
height: 100px;
width: 100px;
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<div id="circle"></div>
UPDATE
or this other 'timing-function'
#circle {
border-radius: 50%;
background: red;
animation: zoomIn 1.5s cubic-bezier(.56,1,.92,.7);
height: 100px;
width: 100px;
animation-fill-mode: forwards; /* */
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1.1);
}
}
<div id="circle"></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');
});
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>