So I have a menu that is revealed using a clip path, and then inside that the links animate from 0 - 1 opacity. This worked for a while, until chrome 66. This still works in Firefox, so I'm not sure if this is a bug in chrome or the way it's supposed to be and Firefox hasn't caught up.
#keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: #f1f200;
padding: 24px;
display: none;
transition: 500ms ease-out;
}
.mobile-menu {
clip-path: circle(0 at 0% 0%);
display: block;
}
.mobile-menu.active {
display: block;
clip-path: circle(200% at 0% 0%);
}
.mobile-menu.active a {
animation-name: slideInDown;
animation-duration: 0.9s;
animation-fill-mode: forwards;
animation-delay: 160ms;
}
.mobile-menu a {
color: #ff005d;
animation-name: none;
display: block;
opacity: 0;
}
https://codepen.io/picard102/pen/zjoexP
So how would I go at replicating the effect in chrome now?
This is bug https://bugs.chromium.org/p/chromium/issues/detail?id=823362
It works fine in Chrome 67 and 68.
Related
I'm just animating a simple text, then, after some time, I want it to disappear, however, a few issues appear:
When it first fades in, you can see that the opacity value isn't respected at all, the text appears almost out of nowhere.
When it fades out, you can see that the movement is weird and the opacity transition runs after the movement.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
What gives? If I remove the second animation, everything comes back to normal.
The property opacity goes from 0 to 1, so the change is happening almost instantly. About the weird movement when leaving, seems fine to me.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
Check this code, I hope this will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation-name: showMessage;
animation-duration: 3s;
animation-delay: 500ms;
animation-direction: alternate;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -55px, 0);
}
50% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100%{
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
</body>
</html>
Using CSS animation, I am adding a 'wobble' effect to each letter in a word. Each letter is made up of an SVG group <g>. However, as you can see in the example, the effect gets more extreme with each letter, whereas I want a consistent 'wobble' per letter (the same effect on each letter). How can this be acheived?
Note: I have not included the SVG source code, to keep the question tidy. It can be seen in the example if needed.
Thanks.
SCSS
// Logo
.logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
width: 260px;
display: block;
// SVG
svg {
display: block;
width: 100%;
overflow: visible;
g {
fill: transparent;
transition: all 300ms ease-in-out;
#keyframes wobble {
0% { transform: rotate(0) translate3d(0, 0, 0) }
25% { transform: rotate(2deg) translate3d(1px, 0, 0) }
50% { transform: rotate(-1deg) translate3d(0, -1px, 0) }
75% { transform: rotate(1deg) translate3d(-1px, 0, 0) }
100% { transform: rotate(-2deg) translate3d(-1px, -1px, 0) }
}
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
path {
fill: red;
}
}
}
}
Example
I could not figure out how to do it with SVGs - I did manage to come up with something similar to your requirement.
Part of the solution involved using a center point for the rotation:
transform-origin: center;
See demo below
#my-logo div {
display: inline-block;
color: red;
font-size: 60px;
font-family: arial;
font-weight: bolder;
text-transform: uppercase;
fill: transparent;
transition: all 300ms ease-in-out;
transform-origin: center;
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
}
#keyframes wobble {
0% {
transform: rotate(0) translate3d(0, 0, 0);
}
25% {
transform: rotate(2deg) translate3d(1px, 0, 0);
}
50% {
transform: rotate(-1deg) translate3d(0, -1px, 0);
}
75% {
transform: rotate(1deg) translate3d(-1px, 0, 0);
}
100% {
transform: rotate(-2deg) translate3d(-1px, -1px, 0);
}
}
<div id="my-logo">
<div>o</div>
<div>u</div>
<div>t</div>
<div>r</div>
<div>a</div>
<div>g</div>
<div>e</div>
<div>
<!-- also works with images -->
<img src="http://placekitten.com/100/100" />
</div>
</div>
I am experimenting with some keyframe animations in css which seem to work fine in IE, Chrome, Firefox but not in Microsoft Edge for some reason. I get this flicker at the end of the animation where I guess it shows their final position and sets the opacity to 1 before hiding them once again and restarting the animation. My code is as follows (This is minified for one bubble, but the link below is a codepen for the whole animation):
HTML:
<div class="canvas">
<div class="bubble"></div>
</div>
CSS:
.canvas {
min-height: 100%;
width: 100%;
background: green;
position: absolute;
overflow: hidden;
}
.bubble {
display: block;
border-radius: 100%;
opacity: 0.8;
position: absolute;
}
.bubble:nth-child(1) {
background: radial-gradient(ellipse at center, #E6EBF2 0%, #E6EBF2 46%, #EFF0EC 100%);
width: 7px;
height: 7px;
left: 13vw;
bottom: 52vh;
-webkit-animation: move1 infinite 10s;
animation: move1 infinite 10s;
}
#-webkit-keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
#keyframes move1 {
0% {
bottom: -100px;
}
100% {
bottom: 44vh;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
opacity: 0;
}
}
Here is a codepen i created:
https://codepen.io/anon/pen/BqqMKe
Any help would be appreciated as I can't seem to figure it out.
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo
I am trying to use this loader in my web site, scc animation works well in Firefox & IE but doesn't work in Google Chrome.
#loader{
width: 820px;
height: 670px;
border: none;
overflow: hidden;
margin: 0px 70px;
background: #0d8aa5;
position: relative;
}
#innerloader{
position: absolute;
left: 50%;
top: 50%;
margin: -60px 0 0 -60px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 100%;
border: 10px solid #19bee1;
}
#innerloader:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
-webkit-animation: rotate 2s infinite linear;
-moz-animation: rotate 2s infinite linear;
-ms-animation: rotate 2s infinite linear;
-o-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
#keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
HTML
<div id="loader"><div id="innerloader"></div></div>
P.S. Here it's working correctly also in google chrome....
You need to include the prefixed keyframe rule for WebKit browsers as well.
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}