This question already has answers here:
How to pause and resume CSS3 animation using JavaScript?
(5 answers)
Closed 2 years ago.
I am having trouble trying to stop and start animation whenever I hover over the element or on click. This is my HTML element:
<div class='marquee'>
<h1>Some Text</h1>
</div>
CSS:
.marquee {
width: 80%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h1 {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Right now, the animation just goes on forever by default. How can I have it so that whenever I hover over or click on the h1 or the div, the animation will pause and resume accordingly. I'm assuming to pause/restart the animation on click, I would need a JavaScript function. Any help is appreciated.
You can use animation-play-state rule:
.marquee {
width: 80%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h1 {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
.marquee h1:hover {
animation-play-state: paused;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class='marquee'>
<h1>Some Text</h1>
</div>
Or with JS:
function stopAnimation(e){
if (e.target.style.animationPlayState == ""){
e.target.style.animationPlayState = "paused";
} else {
e.target.style.animationPlayState = "";
}
}
.marquee {
width: 80%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee h1 {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class='marquee'>
<h1 onclick="stopAnimation(event)">Some Text</h1>
</div>
I would suggest using jquery to change the animation property.
$('.marquee').mouseenter(() => { $(this).css("animation: marquee 15s linear infinite"); } );
$('.marquee').mouseleave(() => { $(this).css("animation: none"); } );
Related
I made some running text animation animation in CSS same way, as it is in answer here. I tried to implement it like that to avoid any JS manipulation. And everything works fine in Chrome, but text is trembling in Safari.
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
margin-left: 0;
}
10% {
transform: translateX(0);
margin-left: 0;
}
90% {
transform: translateX(-100%);
margin-left: 100%;
}
100% {
transform: translateX(-100%);
margin-left: 100%;
}
}
<h1 class="marquee">
<span>The only thing that matters now is everything You think of me</span>
</h1>
<p class="marquee">
<span>Beware of short texts!</span>
</p>
I was trying to fix that using only by using CSS, but I still cannot find the solution. Yeah, I can use JS and avoid giving animation to smaller elements. But maybe there is a way to fix this stuff for Safari with CSS only.
My colleague rewritten animation in that way, that it can be handled by Safari. It was obvious to us, that this trembling is caused by using translate + margin, that's why I mentioned it even in title. As you probably know, it is better to avoid margin animations. So, we added wrapper, which have opposite direction animation. Yeah, now we have 2 animations, but they are handled by browsers better, than one with both translation and margin
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee-wrapper {
width: 100%;
animation: marquee-wrapper 4s ease-in-out infinite;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes marquee-wrapper {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
<div class="marquee">
<div class="marquee-wrapper">
<span>
The only thing that matters now is everything You think of me
The only thing that matters now is everything You think of me
</span>
</div>
</div>
<br/>
<div class="marquee">
<div class="marquee-wrapper">
<span>Beware of short texts!</span>
</div>
</div>
Having problem with hyperlinking a menu item. The menu has webkit animation attached. Inspired from a codepen demo to create a orbiting menu. The orbiting circle menu works fine. Somehow the hyperlinks are not working. Would appreciate if i can pause the webkit animation on menu hover. Point me in the right direction.
Here is the [codepen demo link] (https://codepen.io/aroganz/pen/ZEELqKr)
<div class="outCircle">
<div class="rotate anim1">
<div class="counterrotate">
<div class="inner">Home
</div>
</div>
</div>
<div class="rotate anim2">
<div class="counterrotate">
<div class="inner">Our Team
</div>
</div>
</div>
<div class="rotate anim3">
<div class="counterrotate">
<div class="inner">Our Servicces
</div>
</div>
</div>
<div class="rotate anim4">
<div class="counterrotate">
<div class="inner">Contact
</div>
</div>
</div>
</div>
The CSS Part
.outCircle {
width: 300px;
height: 300px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
}
.rotate {
width: 100%;
height: 100%;
position: absolute; /* add this */
}
.counterrotate {
width: 100px;
height: 100px;
}
.inner {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: red;
border-radius: 100px;
background-color: red;
display: table-cell;
}
.anim1 {
-webkit-animation: circle1 35s infinite linear;
}
.anim1 .counterrotate {
-webkit-animation: ccircle1 35s infinite linear;
}
.anim2 {
-webkit-animation: circle2 35s infinite linear;
}
.anim2 .counterrotate {
-webkit-animation: ccircle2 35s infinite linear;
}
.anim3 {
-webkit-animation: circle3 35s infinite linear;
}
.anim3 .counterrotate {
-webkit-animation: ccircle3 35s infinite linear;
}
.anim4{
-webkit-animation: circle4 35s infinite linear;
}
.anim4 .counterrotate {
-webkit-animation: ccircle4 35s infinite linear;
}
#-webkit-keyframes circle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle1 {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(-360deg)
}
}
#-webkit-keyframes circle2 {
from {
-webkit-transform: rotateZ(90deg)
}
to {
-webkit-transform: rotateZ(450deg)
}
}
#-webkit-keyframes ccircle2 {
from {
-webkit-transform: rotateZ(-90deg)
}
to {
-webkit-transform: rotateZ(-450deg)
}
}
#-webkit-keyframes circle3 {
from {
-webkit-transform: rotateZ(180deg)
}
to {
-webkit-transform: rotateZ(540deg)
}
}
#-webkit-keyframes ccircle3 {
from {
-webkit-transform: rotateZ(-180deg)
}
to {
-webkit-transform: rotateZ(-540deg)
}
}
#-webkit-keyframes circle4 {
from {
-webkit-transform: rotateZ(270deg)
}
to {
-webkit-transform: rotateZ(630deg)
}
}
#-webkit-keyframes ccircle4 {
from {
-webkit-transform: rotateZ(-270deg)
}
to {
-webkit-transform: rotateZ(-630deg)
}
}
Would appreciate if i can pause the webkit animation on menu hover.
Since there is lots of different animations on different elements involved here, the easiest way to do this would be something along the lines of
.outCircle:hover * {
animation-play-state: paused !important;
}
When the container element gets hovered, the animation play state for all children gets set to paused, !important added so that it overwrite any states that might be set differently elsewhere.
You can be a bit more specific with the selector though here, since there’s two classes of elements that are animated, so make that
.outCircle:hover .rotate, .outCircle:hover .counterrotate {
animation-play-state: paused !important;
}
Css marquee like effect is flickering sometimes. The animation is not smooth as we expected. It stuck sometimes. I tried the solution available on diff stackoverflow posts but that did not help me much.
http://codepen.io/anon/pen/vmLGXJ
.marquee {
width: 100%;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
animation: marquee 15s linear infinite;
}
#keyframes marquee {
from { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
animation: marquee 15s linear infinite; // you can change the time like 15s to 50s
try to write
from { transform: translate(0, 0); }
to { transform: translate(-100%, 0); } /* Instead of 100% */
Also you can try to use all prefix, -moz- and -webkit-
How can I animate text on a webpage and increase its size while keeping the center anchored at a point? This is what I have tried:
http://jsfiddle.net/wnn2v023/1/
but as can be seen, the anchor point is at (0, 0) instead of the text center. I tried playing around with text-align but couldn't get desired result.
HTML:
<button id="button">
Begin
</button>
<div id="main">
<div id="div">
Hello World!
</div>
</div>
CSS:
#main
{
position: relative;
}
#div
{
position:absolute;
font-size:0em;
}
#-webkit-keyframes my-animation {
0% { font-size: 0em; }
100% { font-size: 5em; }
}
.effect {
-webkit-animation: my-animation 1s; /* Safari 4+ */
animation: my-animation 1s;
animation-fill-mode: forwards;
}
JS:
var e = document.getElementById("button");
var div = document.getElementById("div");
e.addEventListener("click", function()
{
div.className = "effect";
});
Note that I cannot make any changes to the main div. Also I found using the font-size to animate does not give a very smooth animation.
Rather than animating the font-size property, animate transform: scale().
Set the desired font-size on the text along with transform: scale(0) and then animation it to its default scale of transform: scale(1):
document.getElementById('button').addEventListener("click", function() {
document.querySelector('.text').classList.toggle("effect");
});
.container {
position: relative;
}
.text {
position: absolute;
transform: scale(0);
font-size: 5em;
}
#-webkit-keyframes grow {
100% { transform: scale(1); }
}
#keyframes grow {
100% { transform: scale(1); }
}
.effect {
-webkit-animation: grow 1s forwards;
animation: grow 1s forwards;
}
<button id="button">Begin</button>
<div class="container">
<span class="text">Hello World!</span>
</div>
You need to specifiy margin:0 auto, try this:demo
changed only the css part,
#main {
position: relative;
}
#div {
margin:0 auto;;
text-align: center;
width:82%;
}
#-webkit-keyframes my-animation {
0% {
font-size: 0em;
}
100% {
font-size: 5em;
}
}
.effect {
-webkit-animation: my-animation 1s;
/* Safari 4+ */
animation: my-animation 1s;
animation-fill-mode: forwards;
}
`
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-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); } }