My code currently looks like this:
#keyframes lfade {
from {
opacity: 0;
margin-left: 45px;
}
to {
opacity: 1;
margin-left: 0px; //this line
}
}
Can I remove the margin-left line in the to block so the browser uses the default margin for the object I'm trying to animate instead of 0px?
It seems to work in Firefox and Opera, but I wasn't able to find any official sources.
Yeah you can but first you have to specify the original margin left in the stylsheet of what you are animating before taking it out like this :
#tag { width: 200; margin-left:45;}//you just do what you know overthere
then set your animation tags
#keyframes lfade {
from {
opacity: 0;
margin-left: 45px;
}
to {
opacity: 1;
margin-left: 0px; //this line
}
}
try this
Related
why animation can be reusable after im changing elemets display property with js
can some one explain i couldnt find any answer for this
can someone explain me this
my codes downbelow
`
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
aside {
display: none;
position: relative;
left: -100%;
height: 100vh;
background-color: red;
width: 20%;
animation: openit 800ms ease-in forwards ;
}
#keyframes openit {
to{
left: 0;
}
}
aside a {
display: block;
}
.open {
position: absolute;
z-index: -1;
}
</style>
`
I found this:
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
form this link. I hope this help.
I have a very sublet keyframe animation. I'd like for it to play every single time the page has been scrolled - not just once when coming in the viewpoint. Each time the scroll is touched. All I can find is running once in viewport - which is fine, but it needs to play every time the scroll is touched in the viewport. Any ideas?
/* CSS */
.aha-section .pixels .light {
margin-top: 4px;
margin-left: 33px;
animation: slide 2s 1;
}
#keyframes slide {
from {
margin-left: 33px;
}
50% {
margin-left: 45px;
}
to {
margin-left: 33px;
}
}
You will need to use some JavaScript... then you will listen to the scroll event to do the desired function...
To trigger a animation set a class to it:
.scrolled .aha-section .pixels .light {
animation: slide 2s 1;
}
and let the javascript add this class when the event scroll happens:
document.body.className += ' scrolled';
hope it helps to show you the direction.
let animated = false;
window.addEventListener("scroll", (event) => {
animateOnScroll();
});
function animateOnScroll(){
if(animated == false){
animated = !animated;
document.body.className += ' scrolled';
setTimeout(function() {
animated = false;
document.body.classList.remove('scrolled');
}, 2000); //match whatever time set on css animation
}
}
.aha-section {
position: fixed;
}
.aha-section .pixels .light {
margin-top: 4px;
margin-left: 33px;
}
.scrolled .aha-section .pixels .light {
animation: slide 2s 1;
}
#keyframes slide {
from {
margin-left: 33px;
}
50% {
margin-left: 45px;
}
to {
margin-left: 33px;
}
}
.scroll-emulator {
height: 2500px;
}
<div class="aha-section">
<div class="pixels">
<div class="light">Light</div>
</div>
</div>
<div class="scroll-emulator"><div>
I am using a website template on Cargo Collective. On the Home page, there is a grid of images with text that only appears on hover. In Mobile view, the text does not appear. I understand hover doesn't work consistently on mobile devices. Is there a way to set this text to appear when the page loads on mobile?
Alternatively, how would I remove the hover functionality and have the text always visible?
Here are the two spots where hover appears in the CSS:
[data-predefined-style="true"] bodycopy a:hover {
}
bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
border-bottom: 0;
padding-bottom: 0;
}
/**
* Thumbnail Hover
*/
.thumbnails .thumbnail > a {
position: relative;
}
.thumbnails .thumbnail .title {
background: rgba(0, 0, 0, 0.4);
padding: 0.5rem 1.2rem 0.7rem 1.2rem;
margin: 2.4rem;
color: rgba(255, 255, 255, 1);
align-content: center;
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 9;
opacity: 0;
}
.thumbnails .title span {
margin: auto;
display: inline-block;
}
.thumbnails .thumbnail:hover .title {
opacity: 1;
}
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
Out if this part we can make something up.
body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}
What if we removed the .thumnails:hover and changed the opacity to 1? it might do the trick.
body.mobile .thumbnails .title {
opacity: 1;
}
I hope this works but I have no Idea about Cargo Collective. Just using css knowledge.
I recommend to you to learn some css basics. This will help you to solve problem like this in the future.
Here's a small example showing how you could hide and display text depending on the width of the viewport using media queries. A similar method can be applied to your problem by only setting the :hover properties when the screen has a given minimum width.
Also note, that that device-width has been depreciated and removed from Web standards. So be careful when choosing your media query.
/* General styles */
p {
transition: opacity 0.3s;
}
/* Small styles */
.large {
opacity: 0;
}
.small {
opacity: 1;
}
/* Large styles */
#media only screen and (min-width: 640px) {
.large {
opacity: 1;
}
.small {
opacity: 0;
}
}
<p class="large">I'm visible when the screen is large!</p>
<p class="small">I'm visible when the screen is small!</p>
I should also mention that this is by no means a perfect solution. If you want to be more accurate, I would recommend using Javascript to detect the device type and modify your classes via Javascript.
I am using purely CSS to create a dynamically opening and closing sidebar based on the view-port with of the page. I have a couple issues with my code however:
How can I prevent an animation when the screen first loads? That is, I simply want the sidebar to be opened or closed on first loading, and then animated when the view-port is adjusted.
Why do I have to have two separate animations? Notice I have two identical keyframes toggle and toggle1, which are used for closing and opening respectively. If I try to use just toggle for both animations, the animation occurs instantly. Any workaround without duplicated code?
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
}
#media (min-width: 500px) {
#sidebar {
animation: toggle 200ms ease-in 1 reverse forwards;
}
}
#media (max-width: 500px) {
#sidebar {
animation: toggle1 200ms ease-out 1 normal forwards;
}
}
#keyframes toggle {
0% {
left: 0px;
}
100% {
left: -200px;
}
}
#keyframes toggle1 {
from {
left: 0px;
}
to {
left: -200px;
}
}
<div id="sidebar"></div>
Just use a simple transition instead of animation, and 1 media query
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
transition:left 500ms ease;
left:0;
}
#media (max-width: 500px) {
#sidebar {
left: -200px;
}
}
https://jsfiddle.net/ufoste1y/3/
You can also use transform:translateX, which should provide better performance.
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
transition:transform 500ms ease;
}
#media (max-width: 500px) {
#sidebar {
transform: translateX(-200px);
}
}
https://jsfiddle.net/ufoste1y/8/
In order to force the sidebar to be opened or closed by default, that cannot be done with raw CSS. You'd need JavaScript to wait until the page has finished loading, and then dynamically update the element to have a class or similar that the CSS animation applies to.
As for the duplicate code, you can certainly just use toggle. It not working for you was probably a result of you forgetting to also change the #media animation reference from toggle1 to toggle.
Here's an example showing the sidebar staying open by default with the aid of JavaScript. The animation is now triggering only on the .loaded class, and the JavaScript applies the loaded class to the element 1000 milliseconds after the page has loaded, meaning that it won't trigger the animation initially.
Having said that, you'll probably only want to trigger the slide on some sort of condition anyway, and JavaScript would be much better suited to that :)
window.addEventListener("load", function() {
setTimeout(function() {
var sidebar = document.getElementById("sidebar");
sidebar.classList.add("loaded");
}, 1000);
});
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#sidebar {
position: absolute;
width: 200px;
background-color: #123456;
height: 100vh;
}
#media (min-width: 500px) {
#sidebar.loaded {
animation: toggle 200ms ease-in 1 reverse forwards;
}
}
#media (max-width: 500px) {
#sidebar.loaded {
animation: toggle 200ms ease-out 1 normal forwards;
}
}
#keyframes toggle {
0% {
left: 0px;
}
100% {
left: -200px;
}
}
<div id="sidebar"></div>
I'm having trouble handling the "transitionend" event in Microsoft Edge, on a pseudo element.
It works in other browsers like chrome, safari, and firefox. I thought it may have been a bug with MS Edge, but it doesn't work in IE11 either, so maybe there is some other way that I'm missing in the Microsoft world.
Does anyone know how to handle this in IE?
Here's the code... the box will turn green after the fade-in completes if the transitionend event has been handled correctly.
window.setTimeout(function(){
$('#box').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd',function(){
$(this).addClass('done');
});
$('#box').addClass('show');
},1);
#box {
position: relative;
}
#box:before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show:before {
opacity: 1;
}
#box.done:before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="box"></div>
#box {
position: relative;
}
#box > .before {
position: absolute;
height: 100px;
width: 100px;
background-color: tomato;
transition: opacity 1s;
opacity: 0;
content: "";
}
#box.show > .before {
opacity: 1;
}
#box.done > .before {
background-color: green;
}
IE11 has an issue with transitionend on pseudo element. If added extra elements inside the parent container. This worked for me!
Is you used jQuery's .animate() function, you can have a function put on the end to be run, like this:
$(document).ready(function() {
$('#box').animate({opacity: 1}, 1000, function() {
$('#box').animate({background-color: green}, 1000);
});
});
The background-color will only transition to green after it has finished fading in. Hopefully this helps!