I created an animated arrow set in one icon. So far so good. However, it suddenly shifts to the left for a moment during the sequence which makes the whole animation shaky.
Here is the pen to see the animation in action:
https://codepen.io/erwinvanlun/pen/VxWQQy?editors=1100
Below the code. Any clue what is going on?
HTML:
<div style="font-size: 150px; line-height: 100%;
color: darkgrey;">
<i class="icon-fold"></i></div>
CSS:
i.icon-fold {
position: relative;
display: inline-block;
font-style: normal;
box-sizing: border-box;
}
i.icon-fold {
vertical-align: bottom;
margin: .1em .2em 0 .2em;
border: .3em solid transparent;
border-bottom-color: currentColor;
border-width: 0;
animation: scale 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:before, i.icon-fold:after {
content: "";
position: absolute;
box-sizing: border-box;
left: -.3em;
border: .3em solid transparent;
border-bottom-color: currentColor;
}
i.icon-fold:before {
top: -.9em;
transition: opacity 5s linear;
animation: fade 5s linear infinite;
animation-play-state: paused;
}
i.icon-fold:after {
top: -.6em;
}
i.icon-fold:hover, {
animation-play-state: running;
&:after, &:before {
// transform:translateY(-.1em);
animation-play-state: running;
}
}
#keyframes fade {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
}
#keyframes scale {
0% {
left: .3em;
border-width: 0;
}
99% {
left: 0em;
border-width: .3em;
}
}
In keyframes please use 100% instead of 99%
#keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes scale {
0% {
left: .3em;
border-width: 0;
}
100% {
left: 0em;
border-width: .3em;
}
}
Related
I am currently working on an intro transition. Where the following should happen:
A Background-Color transition from a set of different background colors
A word swapping transition -> here should each word change with a fade in and out + blur transition
The basics are working pretty good here, but I can’t get my head around that the whole transition working simultaneously.
Especially the blur in and out transition isn't totally out of timing. I tried so many different values.
My Code:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(1250, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(1250, "linear");
});
},3000);
})();
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: #C0FF01; }
33% { color: #013334; }
66% { color: #C0FF01; }
100% { color: #C0FF01; }
}
#keyframes glow {
0% { background: #013334; }
33% { background: #C0FF01; }
66% { background: #8E7DD2; }
100% { background: #C0FF01; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
}
.intro-content p {
max-width: 1215px;
padding: 0 50px;
color: #C0FF01;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont 9s infinite;
animation-delay: 3s;
animation-timing-function: linear;
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: #013334;
animation: glow 9s infinite;
animation-delay: 3s;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms linear 0s infinite normal none;
animation-delay: 3s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
20%{
-webkit-filter: blur(0px);
}
40%{
-webkit-filter: blur(8px);
}
60%{
-webkit-filter: blur(8px);
}
80%{
-webkit-filter: blur(0px);
}
100%{
-webkit-filter: blur(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="intro-content">
<div class="intro-logo intro-claim">
<p>life is full of impressions. some of them remain. we create contemporary experiences, that people love to<span id="swap-text">Fade</span></p>
</div>
</header>
<div class="intro-background"></div>
Codepen:
https://codepen.io/Dennisade/pen/eYGBPjq
I think it is just a matter of having 4 different pendulums (animations) with varying time periods and balancing them. So I have made some changes to the time periods in your codepen, specifically css and js, see if this works for you.
CSS:
$transition: 500ms cubic-bezier(0.485, 0.355, 0.345, 0.950);
$green: #013334;
$lightblue: #E3EAF4;
$brightmood: #8E7DD2;
$yellow: #C0FF01;
$introvalue: 9s;
$introdelay: 3s;
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: $yellow; }
33% { color: $green; }
66% { color: $yellow; }
100% { color: $yellow; }
}
#keyframes glow {
0% { background: $green; }
33% { background: $yellow; }
66% { background: $brightmood; }
100% { background: $green; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
p {
max-width: 1215px;
padding: 0 50px;
color: $yellow;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont $introvalue infinite;
animation-delay: $introdelay;
animation-duration: 6s;
}
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: $green;
animation: glow $introvalue infinite;
animation-duration: 6s;
animation-delay: $introdelay;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms infinite;
animation-delay: $introdelay;
animation-duration: 2s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
50%{
-webkit-filter: blur(8px);
}
100%{
-webkit-filter: blur(0px);
}
}
JS:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500, "linear");
});
},2000);
})();
https://codepen.io/gamezordd/pen/oNGYQwp
I have applied this html code to a Text Module and the Text Module turn out in 5 Columns.
I applied the CSS animation and the animation is working fine in Editor but in the website not working on the Post when in the visitor mode.
When i edit the Post in Drag and Drop editor then the Code is working fine when i hover on the Box it animate but not in Visitor mode when i open the page in another browser as Visitor.The post is showing, Columns is showing, but no animation.
.bg-box {
height: 200px;
width: 100%;
position: relative;
background: transparent;
}
.sol-1 {
top: 8px;
left: 0px;
border: 1px solid black;
}
.sol-2 {
top: 8px;
left: 100px;
border: 1px solid black;
}
.sol-3 {
top: 8px;
left: 200px;
border: 1px solid black;
}
.sol-4 {
top: 8px;
left: 300px;
border: 1px solid black;
}
.sol-5 {
top: 8px;
left: 400px;
border: 1px solid black;
}
[class^="sol"] {
position: absolute;
height: 100px;
width: 100px;
z-index: 1;
}
.sol-1:hover ~ .bg-box {
-webkit-animation-name: background-sol-1 !important;
-webkit-animation-duration: 2s !important;
-webkit-animation-fill-mode: forwards !important;
}
.sol-2:hover ~ .bg-box {
-webkit-animation-name: background-sol-2;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
}
.sol-3:hover ~ .bg-box {
-webkit-animation-name: background-sol-3;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.sol-4:hover ~ .bg-box {
-webkit-animation-name: background-sol-4;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
.sol-5:hover ~ .bg-box {
-webkit-animation-name: background-sol-5;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes background-sol-1 {
0% {
background: transparent;
}
100% {
background: black;
}
}
#-webkit-keyframes background-sol-2 {
0% {
background-color: transparent;
}
100% {
background: red;
}
}
#-webkit-keyframes background-sol-3 {
0% {
background: transparent;
}
100% {
background: blue;;
}
}
#-webkit-keyframes background-sol-4 {
0% {
background: transparent;
}
100% {
background: green;;
}
}
#-webkit-keyframes background-sol-5 {
0% {
background: transparent;
}
100% {
background: pink;;
}
}
<html>
<body>
<div class="sol-1"></div>
<div class="sol-2"></div>
<div class="sol-3"></div>
<div class="sol-4"></div>
<div class="sol-5"></div>
<div class="bg-box">
</div>
I am trying to typewrite 2 lines in CSS. My problem is that both lines are being written at the same time. I tried to use the animation-delay property but it does not work properly.
How can I type out the first line then type out the second line?
/*-----------------------LINE 1-----------------------*/
.line-1{
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter{
from{width: 0;}
to{width: 9.5em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
animation-delay: 4s;
}
#keyframes typewriter{
from{width: 0;}
to{width: 15em;}
}
#keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
/*-----------------------LINE 1-----------------------*/
.line-1, .line-2 {
font-family: monospace;
position: relative;
top: 30%;
left: 15%;
width: 24em;
margin: 0 auto;
font-size: 250%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter1 4s steps(44) 1s 1 normal both,
blinkTextCursor1 500ms steps(44) infinite normal;
}
#keyframes typewriter1 {
from {
width: 0;
}
to{
width: 9.5em;
}
}
#keyframes blinkTextCursor1 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
/*-----------------------LINE 2-----------------------*/
/* Animation */
.anim-typewriter2{
animation: typewriter2 4s steps(44) 1s 1 normal both,
blinkTextCursor2 500ms steps(44) infinite normal;
animation-delay: 5s;
}
#keyframes typewriter2 {
from {
width: 0;
}
to {
width: 15em;
}
}
#keyframes blinkTextCursor2 {
from {
border-right-color: rgba(255,255,255,.75);
}
to {
border-right-color: transparent;
}
}
<p class="line-1 anim-typewriter">Hi, I'm Mohanad,</p>
<p class="line-2 anim-typewriter2">I do cool computer stuff.</p>
I guess this is what you're looking for. My guess is that you defined 2 animatations with the same name and therefor you overwrite them. Also you needed to specify properties from .line-1 to .line-2
My goal is to create a dropdown that fades in every time its parent element is moused over.
And, I want to use the CSS #keyframe property to control the opacity.
See the below example. It works in IE and Chrome as expected (fade-in happens on every mouse over). But, in FireFox, the fade-in happens only on the first mouse over. How can I get the fade-in to happen every time in FireFox?
CodePen showing example:
http://codepen.io/anon/pen/IEBgb
(notice the green "Baz" text fades in)
HTML:
<div class="foo">Foo
<div class="bar">
<div class="baz">
Baz
</div>
</div>
</div>
CSS:
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.foo {
cursor: pointer;
background: #333;
color: #ededed;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
width: 200px;
font-size: 30px;
}
.bar {
width: 200px;
position: absolute;
top: 52px;
background: gray;
display: none;
padding: 20px 0;
}
.foo:hover .bar {
display: block;
}
.baz {
font-size: 50px;
color: green;
visibility: visible;
opacity: 1;
-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
animation: fadeIn 2s;
}
It can be done, but you will have to adjust a few things:
Working Example
#-webkit-keyframes fadeIn {
0% {
color: rgba(0, 128, 0, 0); /* transparent text color */
opacity: 0;
}
50% {
color: rgba(0, 128, 0, 0); /* transparent text color */
opacity:1;
}
100% {
color: rgba(0, 128, 0, 1); /* fade in text color */
opacity: 1;
}
}
#keyframes fadeIn {
0% {
color: rgba(0, 128, 0, 0);
opacity: 0;
}
50% {
color: rgba(0, 128, 0, 0);
opacity:1;
}
100% {
color: rgba(0, 128, 0, 1);
opacity: 1;
}
}
.foo {
cursor: pointer;
background: #333;
color: #ededed;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
width: 200px;
font-size: 30px;
}
.bar {
display:none;
width: 200px;
position: absolute;
top: 50px;
background: gray;
padding: 20px 0;
}
.baz {
font-size: 50px;
}
.foo:hover .bar {
display: block;
-webkit-animation: fadeIn 2s both; /* attach the animation to bar rather than baz */
animation: fadeIn 2s both;
}
Or if you're looking to fade in and fade out you could try something like this:
Working Example 2
Note that the second method uses pointer-events:none/auto so it may have compatibility issues in older browsers. Also seeing the fadeOut animation when the page first loads may be a problem.
I know it is possible to draw and animate arcs in SVG and canvas. However, is it possible in CSS?
I have created an arc using the following method:
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
}
But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way?
Here is working demo with minimum of hard-coded variables. This works based on animated circle halves:
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
background-color: lime;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
Also the same look as iConnor's answer but doesn't have drawback of hardcoded background-color:
*,
*:before,
*:after {
box-sizing: border-box;
}
.circle {
display: inline-flex;
overflow: hidden;
}
.circle__half {
height: 200px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle__half:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 0 0 100px;
border: 10px solid #00507c;
border-right-color: transparent;
background-color: #0087cf;
transform-origin: 100% 50%;
/* hidden by default */
transform: rotate(180deg);
opacity: 0.65;
animation-name: rotate-circle-half;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.circle__half--right {
transform: scale(-1, -1);
}
.circle .circle__half--right:before {
animation-name: rotate-circle-half--right;
}
/* show half of circle half of the time */
#keyframes rotate-circle-half {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes rotate-circle-half--right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="circle__half"></div>
<div class="circle__half circle__half--right"></div>
</div>
If you need sole CSS3, then you can set a width+height, set border-radius to 100%, disable the extra borders (use only 1 or 2) and add some good pixels to it.
Then you can animate using animate: time animation ease timingFunction;
Declare the animation itself using #-prefix-keyframes { . . . } (Eh yea, looks like most browser engines require prefix for this one, chrome does :S)
I think I might have something close to what you mean:
.qLoader2 {
border: 4px solid blue;
width: 10vw;
height: 10vw;
width: 72px;
height: 72px;
position: absolute;
top: 12vh;
right: 45vw;
left: 45vw;
background: white;
opacity: 0.45;
border-right: none;
border-top: none;
border-left: none;
z-index: 2000;
background-color: transparent;
border-radius: 100%;
transform: rotateZ(0);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* #-moz-keyframes spin { . . . } */
/* #-ms-keyframes spin { . . . } */
/* #-o-keyframes spin { . . . } */
#-webkit-keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
#keyframes spin {
from {
transform: rotateZ(0deg) scale(1);
}
50% {
transform: rotateZ(540deg) scale(0.9);
border-color: #0099ff;
}
to {
transform: rotateZ(1080deg) scale(1);
}
}
<div class="qLoader2"></div>
On JSFiddle
Feel free to use and modify.
Alternatively you could check something with SVG it's fairly decent as well and supported by most nowadays browsers.
EDIT: Using two arcs, you can have the animation draw cleanly from left-to-right AND have the background show through:
http://jsfiddle.net/sPv4A/6/
Vendor prefixes not included for CSS:
.arcContain {
width: 150px;
height: 400px;
position: relative;
margin: 20px;
}
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border: 2px solid black;
border-bottom: 2px solid transparent;
position: absolute;
top: 0;
right: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.archideLeft .arc {
top: auto;
bottom: 0;
right: auto;
left: 0;
}
.archide {
width: 50%;
height: 0%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
animation: appear 1.2s ease-in 1.2s forwards;
}
.archideLeft {
top: auto;
bottom: 0;
right: auto;
left: 0;
animation: appear 1.2s ease-out forwards;
}
#keyframes appear {
to {
height: 100%;
}
}
<div class="arcContain">
<div class="archide archideLeft">
<div class="arc"></div>
</div>
<div class="archide">
<div class="arc"></div>
</div>
</div>
OLD ANSWER: Maybe using two child divs to cover it up, and then have them shrink away to reveal it:
.arc {
width: 150px;
height: 400px;
border-radius: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.arcInner {
background: white;
height: 402px;
width: 77px;
position: absolute;
}
.arcLeft {
top: -2px;
left: -2px;
-webkit-transition: height 2s linear;
-moz-transition: height 2s linear;
-ms-transition: height 2s linear;
-o-transition: height 2s linear;
transition: height 2s linear;
}
.arcRight {
bottom: 0;
right: -2px;
-webkit-transition: height 2s 2s linear;
-moz-transition: height 2s 2s linear;
-ms-transition: height 2s 2s linear;
-o-transition: height 2s 2s linear;
transition: height 2s 2s linear;
}
.appear .arcInner {
height: 0;
}
<div class="arc">
<div class="arcInner arcLeft"></div>
<div class="arcInner arcRight"></div>
</div>
As Per Chris B's suggestion on the original question, the answer is to contain the arc in another div and then animate the width of the container:
http://jsfiddle.net/AZb3X/
CSS:
body{
background:orange;
}
.arc{
width:150px;
height:400px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid white;
float:left;
}
.hider{
width:0px;
overflow:hidden;
-webkit-animation:unhide 12s;
}
#-webkit-keyframes unhide{
100%{width:400px}
}
HTML:
<div class='hider'>
<div class="arc"></div>
</div>
I may be a little late, but I think using two "hiders" and translating one up and one down will look a little better.
Working Example
<div class="wrap">
<div class="arc"></div>
</div>
body {
background:orange;
}
.wrap {
position:absolute;
height:400px;
width:170px;
overflow: hidden;
}
.arc {
position:absolute;
width:150px;
height:400px;
margin:10px;
border-radius:50%;
border-right:1px solid black;
border-left:1px solid black;
border-top:1px solid black;
border-bottom:1px solid transparent;
}
.arc:before {
content:"";
position:absolute;
left:-1px;
top:-2px;
background: orange;
width:76px;
height:375px;
animation:unhide1 5s linear both;
}
.arc:after {
content:"";
position:absolute;
left:75px;
top:-2px;
background: orange;
float: right;
width:76px;
height:375px;
animation: unhide2 5s linear 5s both;
}
#keyframes unhide1 {
100% {
transform: translatey(-375px);
}
}
#keyframes unhide2 {
100% {
transform: translatey(375px);
}
}