The spec for keyframe animations says that !important will be ignored in keyframes -- it's invalid if set inline in the animation declaration.
From the example spec:
#keyframes important1 {
from { margin-top: 50px; }
50% { margin-top: 150px !important; } /* ignored */
to { margin-top: 100px; }
}
#keyframes important2 {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* ignored */
margin-bottom: 50px; }
}
Is there a known workaround to this?
There are really only two options:
Rewrite the CSS code to avoid the use of !important
Use JavaScript animations instead of CSS animations. A JavaScript solution would be able to alter any inline styles or even document-level stylesheets if necessary
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 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 was reading this, it says
#keyframes rules don't cascade, so animations never derive keyframes
from more than one rule set.
what does "cascade" mean here? English is not my native language and there is no more detailed explanation so I don't understand what it means. Can anyone explain this with an example?
An example of CSS cascading: -
h1 {
font-size: 12px;
width: 200px; /* Sets width */
}
h1 {
font-size: 14px; /* Overrides 12px rule above */
height: 200px; /* Sets height */
}
In the above example the h1 elements font size is first set to 12px in the first rule and then overridden to be 14px by the second rule. The width is set in the first rule and the height is set in the second rule. This is cascading: multiple rules determine the final styles applied, with priority given to properties in the rules descending order.
An example of Keyframes cascading
/* WILL NOT CASCADE */
#keyframes exampleAnimation {
0% { top: 0; left: 0; margin: 10px; }
100% { top: 100px; margin: 20px; }
}
#keyframes exampleAnimation {
0% { top: 0; left: 0; }
100% { top: 0; left: 100px; }
}
The above example will not cascade. That is to say, only the last rule declaration is used for the animation. The animation will move the animating element 100px to the left, it will ignore the top and margin animations set in the previous rule declaration.
I have few classes:
.overlay-blue {background-color: rgba(0,123,238,0.9);}
.overlay-orange { background-color:rgba(240,116,7,0.9); }
.overlay-purple { background-color:rgba(126,64,228,0.9); }
.overlay-green { background-color:rgba(57,151,95,0.9) }
.overlay-pink { background-color:rgba(173,33,106,0.9); }
.overlay-light-blue {background-color:rgba(0,183,168,0.9) }
.overlay-red {background-color:rgba(235,50,89,0.9); }
.overlay:hover
{
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fadeInFromNone;
background-color: rgba(0,0,0,0.3);
}
#-webkit-keyframes fadeInFromNone {
0% {display:block; background-color: rgba(0,0,0,0.9);}
1% {display: block ; background-color: rgba(0,0,0,0.89);}
100% {display: none ; background-color: rgba(0,0,0,0.3);}
}
`
this function of hovering is working well but it turns the overlay to black when starging the animation because of the line
0% {display:block; background-color: rgba(0,0,0,0.9);}
which makes sense.
is there a way to dim the alpha channel without duplicating the code for each color?
There is no easy way going about your current approach, because it is impossible to target just the alpha channel in the rgba() property separately and change it. What you can do, however, is instead of setting a background colour on your element, set the background colour of a pseudo-element stretched to the full dimension of its parent, and only declare the rgb() values. The alpha channel changes can be delegated to the opacity property instead. I call this the pseudo-element approach:
Pseudo-element approach
/* Define BG colours of pseudo element instead */
.overlay-blue::before { background-color: rgb(0,123,238);}
.overlay-orange::before { background-color:rgb(240,116,7); }
/* and more... */
/* Set relative positioning of parent element */
.overlay {
position: relative;
}
/* Stretch pseudo element, declare empty content so it will show */
.overlay::before {
content: '';
opacity: .9;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: all .5s ease-in-out;
z-index: -1;
}
/* Change opacity when parent element is hovered upon */
.overlay:hover::before {
opacity: 0.3;
}
Of course this is a rather basic implementation of your question (see demo fiddle here), because I do not know the exact details you want to achieve with your animation keyframes. The good thing is that pseudo-elements can also be animated :)
SASS approach
Even better: Alternatively, you might want to consider using a CSS preprocessor (SCSS, LESS) so that you can use variables, and do not have to repetitively redeclare the background colours. See the demo here.
You can use the following mixin:
/* Declare mixin */
#mixin overlayColor($color) {
background-color: rgba($color, 0.9);
&:hover { background-color: rgba($color, 0.3); }
}
/* Use #include for each colour class, you only have to declare the rgb(a) values */
.overlay {
margin-bottom: 10px;
padding: 20px;
position: relative;
transition: all .5s ease-in-out;
&.overlay-blue {
#include overlayColor(rgb(0,123,238));
}
&.overlay-orange {
#include overlayColor(rgb(240,116,7));
}
/* and more... */
}
I'm kinda new to LESS, so I'm not sure if that's possible and how.
So my idea is this :
I have a main-stylesheet.less and a dozen smaller stylesheets each of which contains several versions of styling for a particular element i.e. header.less, footer.less, main-nav.less etc.
So in header.less every variant of styling is linked to a condition and when you include this LESS file in the main-stylesheet.less via this condition, just that particular chunk of code is compiled and not the other ones that are linked to other conditions.
I hope I've been thorough enough for you to best understand me.
Is this possible and how ?
Keeping it Generic
By using conditional mixins, the code in main-stylesheet.less stays generic, with only the variables changing to control what is actually compiled.
Example header.less
.header() when (#header = 1) {
#header {
your: properties;
for: header1;
}
}
.header() when (#header = 2) {
#header {
your: properties;
for: header2;
}
}
This could continue on, and similar code would be in the other footer.less files, etc.
Example main-sytlesheet.less
#import header.less;
#import main-nav.less;
#import footer.less;
/* set your variables for your conditional mixins */
#header: 1;
#main-nav: 3;
#footer: 3;
/* call the mixins */
.header();
.main-nav();
.footer();
The global variables you set will only choose the .header() mixin to generate the #header, etc. that #header variable is set to.
I think maybe your looking for a LESS mixin?
/* header.less */
.header1 () {
// including selector
.header {
position: relative;
z-index: 1001;
width: 100%;
margin: 0 0 20px;
overflow: hidden;
}
}
.header2 () {
position: relative;
z-index: 1001;
width: 50%;
margin: 20px;
}
.header3 () {
position: relative;
z-index: 1;
width: 90%;
margin: 0 0 50px;
overflow: hidden;
}
And include it like this:
/* main-stylesheet.less */
#import 'header.less';
body {
.header1();
}
You could also get smart and use one mixin:
.header (#margin: 0, #width: 100%) {
position: relative;
z-index: 1001;
width: #width;
margin: #margin;
overflow: hidden;
}
header {
.header(0 0 20px, 50%);
}