I have written keyframe animation on hover.
#keyframes juggle {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
span:hover{ animation: juggle 1s; }
The animation works fine but on mouse leave, it stops abruptly.
The expectation is to complete the animation even on mouse leave.
Is it possible to do it without jquery.
Hope this works
let section = document.getElementById('homeSection');
let elmnt = section.getElementsByClassName('classname');
for (let i = 0; i < elmnt.length; i++) {
elmnt[i].addEventListener('mouseenter', function () {
elmnt[i].classList.add('Juggle');
setTimeout(function(){
elmnt[i].classList.remove('Juggle')
},400)
})
}
I believe this is something you trying to do
span {
animation-name: juggle-out;
animation-duration: 1s;
animation-repeat-count: 1;
animation-fill-mode: forwards;
}
span:hover{
animation-name: juggle-in;
}
#keyframes juggle-in {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
#keyframes juggle-out {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(0deg, 0deg) translate(0,0);}
}
you should use 2 animations for hover in and hover out
actually there is no hover in and hover out in CSS
It's just a state but the animation-fill-mode plays an important role
The support is not very good though ;)
I recommend adding class instead of this
Use the onmouseover function to add a class which contains the animation and manually remove the class using settimeout function.
Related
I want my element, which is a text, to move in a circular path. I need to use CSS for this. I am attaching my code for the same. The error I face is I need to translate my element to the circumference of the circle. This causes the text to jump to the circumference at the start and the end of the animation. How do I solve this? Is there another method to animate objects to move in a circular direction?
.element{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
animation: orbit2 4s forwards;
}
#-webkit-keyframes orbit2 {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div class= "element">
<a>NEN</a>
</div>
Something like this (or can even change the way the text wraps around the circle):
#spin {
position:absolute;
top:25%;
left:50%;
margin:50px;
animation: orbit 4s forwards infinite;
animation-timing-function: linear;
}
#-webkit-keyframes orbit {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
<div id="spin"><p>text</p></div>
On a WordPress website, in (section -> column -> inner section -> column -> heading) added marquee text by adding below HTML code in (section -> column)
& also added CSS Class in an inner section
sliding-text
& duplicate the inner section
in order to reverse the flow of the second line, I added CSS Class in a duplicate inner section
sliding-text reverse
But I also want to tilt the text a little too (-6deg) which only works for the first line so I also added
selector{ transform: rotate(-6deg)}
which leads to blank space below the footer and when I remove the (transform: rotate(-6deg)}) code blank space is also removed
<style>
body{
--speed: 15s;
}
.sliding-text .elementor-widget-wrap{
transform: rotate(-6deg);
}
.sliding-text .elementor-widget-wrap{
display: block !important;
}
.sliding-text .elementor-widget{
overflow: hidden;
width: 10000vw !important;
max-width: 10000vw !important;
}
.sliding-text .sliding .elementor-widget-container{
-webkit-animation: sliding var(--speed) linear infinite;
-moz-animation: sliding var(--speed) linear infinite;
-o-animation: sliding var(--speed) linear infinite;
animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
float: left;
}
.sliding-text.reverse .elementor-widget-wrap{
transform: rotate(180deg);
}
.sliding-text.reverse .sliding .elementor-heading-title{
transform: scale(-1, -1);
}
#keyframe sliding{
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
var h = []
$('.sliding-text').each(function(){
h.push($(this).find('.elementor-widget').clone().html())
})
function init(){
$('.sliding-text').each(function(i){
var $this = $(this)
$this.find('.elementor-widget').removeClass('sliding')
var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1
$this.find('.elementor-widget').empty().addClass('sliding')
$this.find('.elementor-widget').html(h[i].repeat(amount))
})
}
init()
$(window).on('load resize', init)
})
</script>
Update:
Add the following CSS:
.elementor.elementor-1535 {
overflow: hidden;
}
it should fix the issue.
Is there a possibility to have a transition when adding dynamically a new button to the control group?
For example, in this code, it would be nice to show the new button with a slide-In.
valuesOfParameter.forEach(valueOfParameter => {
// iterative Button
var buttonIterativ = new Autodesk.Viewing.UI.Button(valueOfParameter);
// Click Event
buttonIterativ.onClick = (event) => {
console.log(valueOfParameter);
};
buttonIterativ.addClass(valueOfParameter);
controlGroup.addControl(buttonIterativ);
// controlGroup.addControl(buttonIterativ);
$('#' + valueOfParameter).append('<style>.' + valueOfParameter + ':before{content: attr(data-before); font-size: 20px; color: white;}</style>');
$('#' + valueOfParameter.toString()).attr('data-before', valueOfParameter);
});
Thank you
The easiest way would be to go with CSS3 animation - you can pull it off with no code level changes required, e.g.:
.buttonSlide_in{
animation: slideMe .7s ease-in;
}
#keyframes slideMe{
0%{
transform: skewX(53deg) translateX(-500px);
opacity: 0;
}
60%{
transform: translateX(0px);
}
62%{
transform: skewX(0deg) translateX(30px);
}
70%{
transform: skew(-20deg);
opacity: 1;
}
80%{
transform: skew(0deg) translate(0);
}
90%{
transform: skew(-5deg);
}
100%{
transform: skew(0deg);
}
}
See here to get started and you'd get the attention from the right community if you add more relevant tags such as HTML/CSS animation to your question
For some reason all animations on my site that work perfectly on firefox/chrome/edge have some crazy timing on IE11.
The animation as it's intended: http://sendvid.com/52jn0saf
The animation on IE11: http://sendvid.com/vt6mk9pm
I tried changing animation-timing-function, I tried adding animation-delay 0, but nothing works.
The animation of scrolling in:
.step__hidden{
top: -100vh;
}
.step__active{
animation: scrollIn 1s ease-in-out 0s;
top: 0;
}
#keyframes scrollIn{
0%{
transform: translateY(-100vh);
}
100%{
transform: translateY(0);
}
}
Also, is there even a way to inspect animations in IE/Edge dev tool like in other, saner browsers?
It may be due to you missing out the IE vendor prefix for transform:
#keyframes scrollIn{
0%{
-ms-transform: translateY(-100vh);
transform: translateY(-100vh);
}
100%{
-ms-transform: translateY(-100vh);
transform: translateY(0);
}
}
You can install Firebug on IE to inspect
I don't have much knowledge in css3 and I got this code fragment that makes a div spin infinitely.
.spin {
-webkit-animation: rotation 0.4s linear infinite;
animation: rotation 0.4s linear infinite;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
}
#-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(-180deg); }
100% { -webkit-transform: rotate(-360deg); }
}
#keyframes rotation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-180deg); }
100% { transform: rotate(-360deg); }
}
I want to stop the rotation after a couple of seconds but I don't know what to change. I tried changing infinite to 3 but it stopped and placed my div somewhere else. I need a smooth stop and retains the div original position.
see here jsfiddle
the element was moving because of the translate
code :
.spin {
height:50px;
width:50px;
background:red;
-webkit-animation: rotation 0.4s linear 3;
animation: rotation 0.4s linear 3;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
you should know that the infinite is a value of the animation-iteration-count property which specifies the number of times an animation should be played. so not the seconds.
if you want to stop after N seconds use animation-duration and i suggest you divide the animation declaration into parts, like this :
jsfiddle
for ex you want the spin to rotate for 2 seconds, if you set animation-duration to 2 seconds, the whole animation will take 2 seconds to complete, and that's not what you want. You want your spin to rotate fast for 2 seconds, so you need to calculate the animation-iteration-count like this 2second/animation-duration
say you want 1 rotation to be completed in 0.5s, you set the animation-duration:0.5s and then animation-iteration-count to 2s/0.5 = 4
code :
spin {
height:50px;
width:50px;
background:red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation-name:rotation;
animation-delay:0s;
animation-duration:0.5s;
animation-iteration-count:4;
animation-fill-mode:backwards;
}
for more info about animations, read here : CSS3 animation Property