I have this animation working in Chrome and Android, while in Safari and iOS rings are not fading away but staying black. What is causing that?
Is there way not to use box-shadow and achieve same effect?
https://codepen.io/anon/pen/oVZWQa
<div class="loader">
<span class="ring ring-1"></span>
<span class="ring ring-2"></span>
<span class="ring ring-3"></span>
<span class="ring ring-4"></span>
</div>
#yellow: #FFD200;
#brown: darken(#yellow, 45%);
body {
background: fade(#yellow, 90%);
}
.loader {
position: relative;
width: 20rem;
height: 20rem;
.ring {
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
animation: pulse 8s ease-out infinite;
&.ring-2 {
animation-delay: 2000ms
}
&.ring-3 {
animation-delay: 4000ms
}
&.ring-4 {
animation-delay: 6000ms
}
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 60px #brown;
transform: scale(0);
opacity: 0;
}
25% {
box-shadow: 0 0 0 45px rgba(darken(#yellow, 40%), 0.66);
opacity: 1;
}
50% {
box-shadow: 0 0 0 25px rgba(darken(#yellow, 30%) 0.33);
}
100% {
box-shadow: 0 0 0 1px rgba(darken(#yellow, 20%) 0);
transform: scale(1);
}
}
}
as #Turnip pointed out I had missing commas.
Related
How can I make my button decrease size on hover as per this pen here looking at the pulse button?
My CSS looks like this:
.pulse {
margin:100px;
display: block;
width: 170px;
height: 22px;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
}
.pulse:hover {
animation: pulse 2s infinite;
}
#keyframes pulse {
0%{
width: 170px;
}
50%{
width: 120px;
}
}
HTML:
<button class="pulse">Button styling</button>
When I hover, the width decreases, but the effect is not the same as the reference pen which gets smaller on all sides, if that's the correct explanation.
My pen can be found here
try to add transform to get the animation
.pulse {
margin: 100px;
display: block;
width: 170px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}
#keyframes pulse {
0% {
transform: scale(1);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
<button class="pulse">Button styling</button>
I tried to make a smooth animation, but the animate has a sort of "cut bug" in the middle.
How can I fix it ?
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
/*width: 0vw;*/
transform:translate(0vw);
width :0vw;
margin-left: 0;
}
50% {
/*width: 0vw;*/
/*transform:translate(5vw);*/
width :10vw;
}
100% {
/*width: 0vw;*/
transform:translate(1vw);
width :0vw;
margin-right: 0;
}
}
<div> </div>
Here is another way to achieve the same with less of code:
.loading {
height: 3px;
position: fixed;
top: 2vw;
left: 40vw;
right: 40vw;
height: 3px;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
animation: anime 2s ease-in-out infinite alternate;
}
#keyframes anime {
0% {
background-size: 0% 100%;
background-position: left;
}
50% {
background-size: 70% 100%;
}
100% {
background-size: 0% 100%;
background-position: right;
}
}
<div class="loading"></div>
Try setting your animation this way:
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
Is that the effect you are looking for?
Try this and you're done...
Don't use transform translate, use only width instead.
div,
div:after {
width: 0vw;
height: 3px;
position: fixed;
top: 1vw; bottom: 0;
left: 40vw; right: 40vw;
margin: auto;
/* margin-top: -16px;*/
z-index: 600;
background-color: rgba(0, 0, 0, 1);
}
div {
/*background-color: transparent;*/
/* border-top: 3px solid rgba(0, 0, 0, 0.1);
border-right: 3px solid rgba(0, 0, 0, 0.1);
border-bottom: 3px solid rgba(0, 0, 0, 0.1);
border-left: 3px solid black;
-webkit-transform: translateZ(0);
transform: translateZ(0);*/
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: animsition-loading;
animation-name: animsition-loading;
}
#-webkit-keyframes animsition-loading {
0% {
width :0;
left: 0;
}
50% {
width :10vw;
}
100% {
width :0;
right: 0;
}
}
<div> </div>
I cannot get this animation to work in Safari 12 no matter what I try. I've tried vendor prefixes and all, but nothing works.
It works fine in Chrome. Anyone have any ideas?
<div class="spinners"></div>
This is the css:
#keyframes spinx {
0% {
transform: rotate3d(0, 1, 1, 360deg);
}
100% {
transform: rotate3d(0, 0, 0, 360deg);
}
}
.spinners {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
position: relative;
}
.spinners:before, .spinners:after {
content: "";
width: 4rem;
height: 4rem;
border: 3px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -2rem 0 0 -2rem;
display: block;
transform-origin: 50% 50% 0;
}
.spinners:before {
animation: spinx 2s infinite linear;
}
.spinners:after {
border-color: blue;
animation: spinx 4s infinite linear alternate;
}
Here's a demo:
https://codepen.io/Skinner927/pen/vVEdag
Seems like both Safari and Firefox don't recognise the change between the two key frames. To solve this you can use an intermediate keyframe:
50% {
transform: rotate3d(0, 1, 1, 180deg);
}
Demo:
#keyframes spinx {
0% {
transform: rotate3d(0, 1, 1, 360deg);
}
50% {
transform: rotate3d(0, 1, 1, 180deg);
}
100% {
transform: rotate3d(0, 0, 0, 0);
}
}
.spinners {
display: block;
width: 100%;
height: 4rem;
overflow: hidden;
position: relative;
}
.spinners:before,
.spinners:after {
content: "";
width: 4rem;
height: 4rem;
border: 3px solid red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -2rem 0 0 -2rem;
display: block;
transform-origin: 50% 50% 0;
}
.spinners:before {
animation: spinx 2s infinite linear;
}
.spinners:after {
border-color: blue;
animation: spinx 4s infinite linear alternate;
}
<div class="box">
<div class="spinners"></div>
</div>
Trying to do some CSS3 transitions and animations using 2 images.
Our requirement is
First display the background image
Move it slightly on the northward direction
Display the background image for few seconds (pause effect)
After few seconds introduce the foreground image (fade in effect)
Slightly move the image in northward direction
Fade out the foreground image
But we are unable to achieve the above exactly. Currently the background and foreground image are moving almost at the same time, unable to achieve the 'fade in' effect for the foreground image.
Demo Link: https://jsfiddle.net/sandeepskm/kLtyssjc/
Please help us out.
Our code
HTML5 Code
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild">
<img src="https://cdn3.iconfinder.com/data/icons/black-easy/512/535106-user_512x512.png" width="150px" alt="" />
</div>
</div>
CSS3 Code
#a
{
width: 100%;
height: 600px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: relative;
background-image: url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/11-sea-beach-sand-wallpaper.jpg);
}
#b
{
width: 100%;
height: 10px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: absolute;
bottom: 0;
}
.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUp
{
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild
{
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes slideInUp
{
from
{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to
{
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#-webkit-keyframes slideInUp
{
from
{
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to
{
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#-webkit-keyframes slideInUpChild
{
from
{
bottom: 0;
}
to
{
bottom: calc(100% - 100px);
}
}
#keyframes slideInUpChild
{
from
{
bottom: 0;
}
to
{
bottom: calc(100% - 100px);
}
}
You can achieve this by doing the following changes:
Set initial opacity of the element that contains the image as 0 because it needs to fade-in later.
To make sure that the foreground image fades-in and moves up a few seconds after background image has appeared and taken its position, add a delay that is more than animation-duration of the background image. Here, I have set it as 2s. (I have also increased animation-duration of the foreground image to make the effect more visible but that is optional).
Within the keyframes setting for the foreground image, make the initial state as opacity: 0 and bottom: 150px (this is equal to the height of the image).
Since there are 3 stages of animation for the foreground image (that is, the fade-in, the move and the fade-out), set the splits as 33%, 66% and 100%.
At 33% change its opacity alone to 1 while bottom position remains the same. This produces the fade-in effect.
At 66% retain the opacity as 1 but change the bottom position as required. This means that the image moves-up while still being visible.
At 100%, retain the bottom position as-is but change the opacity to 0. This makes it fade-out.
Modified CSS:
.slideInUpChild {
opacity: 0;
animation-name: slideInUpChild;
animation-duration: 4s;
animation-delay: 2s;
}
#keyframes slideInUpChild {
0% {
opacity: 0;
bottom: 150px;
}
33% {
opacity: 1;
bottom: 150px;
}
66% {
opacity: 1;
bottom: calc(100% - 100px);
}
100% {
opacity: 0;
bottom: calc(100% - 100px);
}
}
#a {
width: 100%;
height: 600px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: relative;
background-image: url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/11-sea-beach-sand-wallpaper.jpg);
overflow: hidden;
}
#b {
width: 100%;
height: 10px;
margin: 0 0 0 0;
padding: 0 0 0 0;
position: absolute;
bottom: 0;
}
.animated {
animation-duration: 1s;
}
.slideInUp {
animation-name: slideInUp;
animation-duration: 1s;
}
.slideInUpChild {
opacity: 0;
animation-name: slideInUpChild;
animation-duration: 4s;
animation-delay: 2s;
}
#keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
}
to {
transform: translate3d(0, 0%, 0);
}
}
#keyframes slideInUpChild {
0% {
opacity: 0;
bottom: 150px;
}
33% {
opacity: 1;
bottom: 150px;
}
66% {
opacity: 1;
bottom: calc(100% - 100px);
}
100% {
opacity: 0;
bottom: calc(100% - 100px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild">
<img src="https://cdn3.iconfinder.com/data/icons/black-easy/512/535106-user_512x512.png" width="150px" alt="" />
</div>
</div>
I was just looking at a simple SVG cake animation HERE , the CSS code looks like so:
#import url(http://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
width: 100%;
height: 100%;
}
body {
background: #ee9ca7;
}
#cake {
display: block;
position: relative;
margin: -10em auto 0 auto;
}
*/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
.text {
color: #8b6a60;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style:italic;
text-align: center;
h1 {
font-size: 1.4em;
}
}
After inspecting the code a bit i came to know the candle flame was caused by this set of HTML elements:
<div class="velas">
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
</div>
And this HTML has the following CSS code:
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
Now i don't see the CSS code that is actually cauing the red and yellow flame , i beleive the white shadow is caused by the very high box shadow given in the animations , but somehow i don't see where the candle flame is created , can somebody guide me as to where the candle flame is really created ?
The colors are set by RGB values. There's a yellow, red, and some pink.
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5); /* yellow */
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); /* pink */
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1); /* red */
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); /* pink again */
transform: translateY(-20px) scale(0);
}
}
Timings to change the colors are set in .fuego:nth-child(1) through .fuego:nth-child(6)