I have problem, when I'm opening menu I need animation like this:
#keyframes opening {
from {
clip-path: circle(0% at 5%, 10%)
}
to {
clip-path: circle(100%)
}
}
#keyframes closing {
from {
clip-path: circle(100%)
}
to {
clip-path: circle(0% at 5%, 10%)
}
}
On my menu
.menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background: #1f1f1f;
display: none;
}
Menu hamburger is button and i use javascript to open and close it while adding .classList.toggle(class - display: block) on my button
but closing animation doesn't work like i want
i also try to use transform CSS and other things and it doesn't gave me safe effect like i saw at keyframe
I tried to do a class in CSS .opening {anination-name:opening, duration and etc.} and after i tried to add it with javascript (toggle, settimeout adn etc.) nothing is working well for menu closing animation
Thanks
For this, a transition is more suitable:
document.addEventListener('click', () =>
document.querySelector('.menu').classList.toggle('open')
)
.menu {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
background-color: #1f1f1f;
clip-path: circle(0% at 5% 10%);
transition: clip-path 2s;
}
.menu.open{
clip-path: circle(100%);
}
<div class="menu" ></div>
Click anywhere to try out effect
Just adding basic demo code for your undestanding.
.loader {
width: 56px;
height: 56px;
border: 8px solid transparent;
border-top-color: $warning;
border-bottom-color: $warning;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
top: 50%;
margin: -28px auto 0;
}
#keyframes loader-rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); }
}
Related
https://jsfiddle.net/t3w1Lqr0/1/
When I run this code it sometimes works as expected and sometimes glitches and goes to 0deg
See the gif Below ↓
I am using it for electron.
I works most of the time in jsfiddle but rarely works in electron.
Electron v13.1.2
Chromium v91.0.4472.77
Node v14.16.0
You could create your animation purely in CSS and Utilize animation-fill-mode: forwards; to preserve the last frame of the animation.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
html, body { height: 100%; }
body {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
}
div, hr::before {
overflow: hidden; position: absolute;
width: 10rem; height: 5rem;
}
hr {
border-style: solid; border-width: 1.5rem;
border-color: #333; border-radius: 10rem;
width: 10rem; height: 10rem;
}
hr::before {
content: '';
transform-origin: 50% 100%; transform: translateX( -50% );
bottom: 0.25rem; left: 50%;
border-radius: 100% 100% 0.5rem 0.5rem;
width: 0.5rem; height: 4.5rem;
background-color: #ccc;
animation-name: rotate; animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; /* Force last frame of animation to stay */
}
#keyframes rotate {
0% { transform: translateX( -50% ) rotate( -90deg ); }
100% { transform: translateX( -50% ) rotate( 90deg ); }
}
<div> <hr> </div>
And if you want to add a delay before your animation starts playing as your JavaScript does you can use the CSS property animation-delay.
I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show
I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>
I am trying to change the navigation arrows and dots of "react-owl-carousel"(npm package) using CSS or JS for the past 2 days but unfortunately, I'm not successfully doing it. I don't want to use jQuery in that project.
I want to change these in this shape/style.👇
"Select the arrows ( id - class name) whatever is provided to you by the library, you can see it from the dom inspector and then over right it with your custom CSS."
So, I did this. It works perfectly! Thanks, -Aly Abd El Rahman
::scss::
#root {
.App {
.owl-carousel {
.owl-nav {
.owl-prev {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
left: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%);
span {
visibility: hidden;
}
}
.owl-next {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
right: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%) rotate(180deg);
span {
visibility: hidden;
}
}
}
.owl-dots {
position: absolute;
top: 89%;
left: 25vw;
.active {
background-color: white !important;
height: 10px !important;
width: 10px !important;
transition: all 0.3s linear !important;
}
.owl-dot {
background: hsla(0, 0%, 100%, 0.3);
display: inline-block;
height: 8px;
width: 8px;
margin-right: 30px;
vertical-align: middle;
border: none;
transition: all 0.3s linear;
span {
visibility: hidden;
}
}
}
}
}
}
I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});
Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>