I have the following HTML:
<p class="animate">X</p>
And this is my CSS:
.animate {
animation-duration: 0.75s;
animation-name: add-icon;
font-size: 8em;
}
#keyframes add-icon {
0% {
font-size: 18em;
}
25% {
font-size: 6em;
}
60% {
font-size: 13em;
}
100% {
font-size: 8em;
}
}
This is what I expect to see: (tested in Firefox, Chrome, Edge)
But this is how it actually behaves in Safari 11:
I tried to prefix my CSS with the Webkit prefixes but that doesn't change the result.
Here's a working demo of my problem.
Use rem instead of em
Actually em depends on the parent element and rem depends on the root element...so its good to use rem instead of em.
Read this article
Stack Snippet
.animate {
animation-duration: 0.75s;
animation-name: add-icon;
font-size: 8rem;
}
#keyframes add-icon {
0% {
font-size: 18rem;
}
25% {
font-size: 6rem;
}
60% {
font-size: 13rem;
}
100% {
font-size: 8rem;
}
}
<p class="animate">X</p>
Related
As part of making our websystem responsive to mobile devices, I'm using CSS media queries to alternate between having a header bar and a hamburger menu.
Now I thought it'd be a nice gimmick if it animated between the two layouts when desktop users adjusted the size of their browser window beyond the bounds defined by the media queries. As a proof-of-concept test I've been experimenting with the transition between our large logo and the small one.
My animations.scss file contains these two animations:
#mixin ToSmallLogo() {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapToSmallLogo;
#keyframes SwapToSmallLogo {
0% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
}
#mixin SwapToBigLogo() {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapToBigLogo;
#keyframes SwapToBigLogo {
0% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
}
}
Then I've got a SCSS file specifically for the media queries, containing:
#import '../../Variables/Sizes.scss';
#import '../Animations/animations.scss';
#media screen and (max-width: $bigToSmallFISLogo) {
#franklin {
#include ToSmallLogo();
}
}
#media screen and (min-width: $bigToSmallFISLogo){
#franklin{
#include SwapToBigLogo();
}
}
While the CSS before application of the media queries is this:
#franklin {
display: block;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
}
My issue is, while shrinking the screen past the defined size works perfectly, going back up just snaps to the larger image with no animation. I'd thought that the culprit was that I had the image defined in the CSS before application of the media queries, so I removed that part of it; but that just resulted in having no image.
Then while typing this question I had the idea use a media query to determine the direction of the animation, like so:
#mixin SwapLogo() {
/* background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;*/
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: SwapLogo;
#media screen and (max-width: $bigToSmallFISLogo) {
animation-direction: normal;
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
#media screen and (min-width: $bigToSmallFISLogo) {
animation-direction: reverse;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
#keyframes SwapLogo {
0% {
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
100% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
}
That resulted in the animation being ran on page load, but not at the resize.
Is there any way to do what I'm looking for?
Option 1 contains some faulty css
You've set the starting to width: 100%; on your SwapToBigLogo
#keyframes SwapToBigLogo {
0% {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
width: 100%; <---- culprit
background-image: url('../../../PageAssets/Fis.png');
}
Essentially, you're animation from width: 100% to width:100%. If you remove that line, it will probably work.
Option 2 tricky with reversing
When you reverse an animation, it will not reset iteration count and progress of the animation.
IE if you 'reverse' an animation at 100% finished. it will just apply the 100% finished of the 'reverse' state. not start from 0% reverse and animate to 100% reversed
see my answer to this question if you want to circumvent that
Alternative, use Transitions instead
If you have no need for complex animations and just want to smoothly transition from one state to another.
I would prefer to use css transitions.
#franklin {
display: block;
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
transition: width 2s ease-in; // <--- this will animate when the media query kicks in.
}
#media screen and (max-width: $bigToSmallFISLogo) {
#franklin {
background-image: url('../../../../PageAssets/fissmall.png');
width: 7%;
}
}
#media screen and (min-width: $bigToSmallFISLogo){
#franklin{
width: 100%;
background-image: url('../../../PageAssets/Fis.png');
}
}
Bonus
You can apply transitions to a * selector. (I would not recommend that for production grade websites, but it's fun to toy with.) It will cause everything to smoothly transition when your media query changes widths/layouts.
* {
transition: all 2s;
}
body {
background-color: red;
color: black;
font-size: 30px;
}
.logo {
width: 200px;
border: 5px solid black;
border-radius: 30px;
padding:20px;
}
/* On screens that are 992px wide or less, the background color is blue */
#media screen and (max-width: 630px) {
body {
background-color: blue;
color: white;
font-size: 20px;
}
.logo {
width: 100px;
border: 3px solid orange;
border-radius: 10px;
padding:10px;
}
}
/* On screens that are 600px wide or less, the background color is olive */
#media screen and (max-width: 400px) {
body {
background-color: lime;
color: white;
font-size: 12px;
}
.logo {
width: 50px;
border: 1px solid indigo;
border-radius: 5px;
padding:2px;
}
}
<h1>Resize window</h1>
<p>
<img class="logo" src="http://placekitten.com/200/300" alt="logo">
</p>
After a lot of experimentation, I've finally sussed it out. Essentially, as Lars pointed out, I'd forgotten to delete a couple of bits; but the solution I ended up with (which seems a bit smoother, as it fades one image into the other) is to have the base CSS as:
#franklin {
display: block;
background-repeat: no-repeat;
background-size: 100%;
height: 72px;
}
Then the mixin to apply the animation as follows:
#mixin SwapLogo($img, $width, $startIMG, $startWidth, $animationName) {
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: $animationName;
background-image: $img;
width: $width;
#keyframes #{$animationName} {
0% {
width: $startWidth;
background-image: $startIMG;
}
100% {
background-image: $img;
width: $width;
}
}
}
With the media queries being:
#media screen and (max-width: calc($bigToSmallFISLogo + 10px)) { //This overlap of 10px basically allows for the animation to take effect as the other animation is removed.
#franklin {
#include SwapLogo(url('../../../../PageAssets/fissmall.png'), 7%, url('../../../../PageAssets/Fis.png'), 100%, LogoGoSmall);
margin-top: 13px;
}
}
#media screen and (min-width: $bigToSmallFISLogo) {
#franklin {
#include SwapLogo(url('../../../../PageAssets/Fis.png'), 100%, url('../../../../PageAssets/fissmall.png'), 7%, LogoGoBig);
}
}
#media screen and (max-width: $minSizeForDesktopMenu) and (min-width: $bigToSmallFISLogo) {
#franklin {
margin-top: 26px;
}
}
#media screen and (min-width: $minSizeForDesktopMenu) {
#franklin {
margin-top: 13px;
}
}
I need to overlap an SVG element's top and bottom with FlexBox items so that the space between them is gone.
What I've tried:
Added a z-index of 1 to the FlexBox items but that didn't do anything.
Added a z-index of -1 to the SVG element but that only hid the element entirely, which is not what I wanted.
Here's my code:
// Lottie returns an SVG with class wrapper.
const defaultOptions = {
loop: false,
autoplay: true,
animationData: balanceData.default,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
className: 'wrapper'
}
};
// home.js
<div className="message">
<div className="txt-1">Find
</div>
<Lottie options={defaultOptions}
height={510}
width={310}
/>
<div className="txt-2">with your</div>
<div className="txt-3">body & mind.</div>
// home.css
.message {
font-family: 'Roboto', sans-serif;
font-size: 6em;
align-items: center;
display: flex;
padding-left: 60px;
padding-top: 60px;
flex-direction: column;
}
.txt-1 {
opacity: 0;
animation-name: txt-1;
animation-duration: 2s;
animation-delay: .5s;
animation-fill-mode: forwards;
display: flex;
align-items: center;
}
.wrapper {
z-index: 1;
}
#keyframes txt-1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.txt-2 {
opacity: 0;
animation-name: txt-2;
animation-duration: 1.5s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes txt-2 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.txt-3 {
opacity: 0;
animation-name: txt-3;
animation-duration: 2s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
}
#keyframes txt-3 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Again, all I want is for space between the FlexBox items and SVG element to be hidden:
Figured it out! Just had to remove align-items: center; from .message and add the following to .wrapper:
.wrapper {
padding-left: 5%;
width: 90% !important;
display: flex !important;
}
to make my UI look like:
Note: I'm well aware it's highly suggested to only use !important in either utility cases or user stylesheets. But the library I'm using to render my SVG doesn't allow me to change their stylesheet, so I feel this is a justified use-case of it.
The following pure css slider is working well, but I need to make it responsive. I've tried replacing the pixel-based sizes with percentages and with vw, but it doesn't line up. I'd be grateful for any ideas.
Here's the html:
<section class="slideshow">
<div class="slideshow-container slide">
<img src="images/anim/home-animation1.jpg" alt="pills">
<img src="images/anim/home-animation2.jpg" alt="scientist">
<img src="images/anim/home-animation3.jpg" alt="chemical structure">
<img src="images/anim/proudmembermassbio.jpg" alt="proud member of MassBio"> </div>
</section>
And the css:
/*general styles*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
/* SLIDESHOW STYLES */
.slideshow-container {
width: 1400px; /* the entire "stage" */
font-size: 0;
transition: 1s ease;
height: 315px;
}
.slideshow-container:hover { animation-play-state: paused; }
.slideshow { /* the visible "stage" */
width: 350px;
margin: 1rem auto -1rem;
overflow: hidden;
border: solid 1px white;
}
img, .text-container {
width: 350px;
height: auto;
display: inline-block;
font-size: 16px;
text-align: center;
}
.text-container { /* for text slides */
height: 195px;
position: relative;
}
.slide { animation: slide 10s ease infinite; }
#keyframes slide {
0% { transform: translateX(0%); }
12.5% { transform: translateX(0%); }
25% { transform: translateX(-25%); }
37.5% { transform: translateX(-25%); }
50% { transform: translateX(-50%); }
62.5% { transform: translateX(-50%); }
75% { transform: translateX(-75%); }
87.5% { transform: translateX(-75%); }
99% { transform: translateX(-75%); }
100% { transform: translateX(0); }
}
.p {
margin-top: 140px;
text-align: center;
}
Maybe this is too late for the user that posted this question, but can be helpful for someone else that want a pure responsive CSS slider.
I have created a working example in this CodePen that is working as requested using percentages for widths and in the animation, and for this reason it is responsive and works really well in each resolutions.
All the main solution to have the responsiveness is here:
slider__container {
display: flex;
position: relative;
animation: 30s slide infinite;
font-size: 0;
width: 1000%; /* because I am using 10 slides */
}
The width should be calculated accordingly to how many slides are there in the slider: slides x 100% (slides times 100%, in my example 1000%).
Im trying to figure out why this simple code isn't working.
http://jsfiddle.net/yq1ro6n5/
#keyframes testing {
from: {font-size: 42px;}
to: {font-size: 64px;}
}
a:after {
content: "Hello!";
animation: testing 1s infinite;
}
-
<a></a>
Can anyone explain?
Remove : from the keyframe like this
#keyframes testing {
from {
font-size: 42px;
}
to {
font-size: 64px;
}
}
a {
}
#keyframes testing {
from {
font-size: 42px;
}
to {
font-size: 64px;
}
}
a:after {
content:"Hello!";
animation: testing 3s infinite;
}
<a></a>
I am working on an exercise about CSS 3 animation. I am stuck on how to keep the item falling down the page at full speed without requiring the user to follow it down with the mouse without resorting to javascript. So just when you hover the mouse over the box the box will fall down.
Here is my code:
<p class="exp9"><strong>box</strong></p>
strong {
margin-top: 20em;
}
p:hover strong {
display: block;
}
p:hover strong:hover {
margin-top: 20em;
}
My code just make the text inside the box drop down. Any idea? Thank you
Use this
/*newly added items start faded out and translated 400px upwards on the y-axis*/
li.new-item {
opacity: 0;
animation: new-item-animation .3s linear forwards;
}
#keyframes new-item-animation {
from {
opacity: 0;
transform: translateY(-400px);
}
to {
opacity: 1;
transform : translateY(0);
}
}
Here is an example of what you can do:
<div class="box">
<p class="innerbox">
Hover
</p>
</div>
CSS:
.innerbox
{
Width:150px;
height:20px;
background-color: lightBlue;
Text-align: center;
Padding:10px 0px;
}
.box
{
Display:inline-block;
Transition: 0.3s 0s All linear;
}
.box:hover
{
Padding-top:20em;
}
In the context of your HTML:
strong
{
Text-align: center; /* this makes it more aesthetic */
Padding:10px 20px; /* this makes the text more easy to hover over */
}
p
{
Display: inline-block; /* this is so the box doesn't stretch the width of the page */
Transition: 0.3s 0s all linear;
}
p:hover
{
padding-top: 20em;
}
Not sure if this is the result you want.
p{
width: max-content; /*add this if you don't want the paragraph to take the whole width*/
}
p strong{
display: block;
}
p:hover strong{
animation: fall .1s linear forwards;
}
#keyframes fall{
0%{
transform: translateY(0);
}
100%{
transform: translateY(20em);
}
}
<p class="exp9"><strong>box</strong></p>