I have finally managed to stop the list blurring for a brief second when it hits the breakpoint, but how do I now loop the list? At the moment it ends after the last bullet point.
#media screen and (max-width: 1023px) {
li {
position: absolute;
top: 0;
left: 0;
width:100%;
opacity: 0;
animation: fadeOut 3s ease-out forwards ;
-webkit-animation: fadeOut 3s ease-out forwards;
animation: fadeOut 3s ease-out forwards ;
}
#-webkit-keyframes fadeOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
li:nth-child(1) {
animation-delay: 0s;
}
li:nth-child(2) {
animation-delay: 3s;
}
li:nth-child(3) {
animation-delay: 6s;
}
li:nth-child(4) {
animation-delay: 9s;
}
}
Ideally I don't want to use JS so would I have to set up a keyframe event each LI's fade in/out? Here is a JSFiddle - https://jsfiddle.net/1gvywmda/1/
I have updated the answer:
https://jsfiddle.net/jwc9rem5/3/
#media screen and (max-width: 1023px) {
.usp-line li:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.usp-line li:not(:first-child) {
opacity: 0;
transition: opacity .7s;
}
}
give all your li position: relative;
.usp-line li {
position: relative;
width: 100%;
opacity: 0;
transition: opacity .7s;
}
And try removing the line-height property from .usp-line
Related
so i want to fade in letter by letter using only css.
:root {
--delay: 1;
}
#welcomemsg span {
visibility: hidden;
}
#welcomemsg span:nth-of-type(n+1) {
animation: type 0s ease-in var(--delay)s;
animation-fill-mode: forwards;
--delay: calc(var(--delay) + 1);
}
#keyframes type {
to {
visibility: unset;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
I did some research and found out that this couldnt work bc the delay would be inside an loop so :nth-of-type(1) delay would be infinite. Is there an way to get this working without doing all nth-of-types by hand ? It would be so cool to do this without creating an css mess.
Here you go...
#welcomemsg {
color: red;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 20s steps(50, end);
}
#keyframes type {
from {
width: 0;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
UPDATE
span {
font-size: 30px;
opacity: 0;
}
span:nth-child(1) {
animation: type 1s forwards 0s;
}
span:nth-child(2) {
animation: type 1s forwards 0.5s;
}
span:nth-child(3) {
animation: type 1s forwards 1s;
}
span:nth-child(4) {
animation: type 1s forwards 1.5s;
}
#keyframes type {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
display: none;
}
}
Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.
You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use opacity, height
.title2 {
width: 100px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 31%;
animation: 1s fadeOutOpacity ease-out;
opacity: 0
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="title2"/>
Here is all my code... I have two divs that will be moved in opposite directions and exit the screen to redirect to another page. The problem is that the div with id="hat" completes the animation and the div with id="sock" does not move at all. I have tested it in browsers, my IDE live preview. Both did not work.
HTML:
body {
background-color: white;
}
.box {
/* TITLES OF CHOICES */
position: relative;
background-color: gainsboro;
border-radius: 50%;
width: 400px;
height: 400px;
display: inline-block;
margin: 10%;
transition: all 1s;
}
#hat {
background-image: url(hat.jpg);
background-position: center;
}
#sock {
background-image: url(sock.jpeg);
background-position: center;
}
div.box:hover {
/* CHANGE COLOR WHEN MOUSE HOVER */
opacity: 0.5;
}
*/
/* left exit */
#-webkit-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#-moz-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#-o-keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
#keyframes pageExitLeft {
from {
left: 40px;
opacity: 1;
}
to {
left: -440px;
opacity: 0;
}
}
/* right exit */
#-webkit-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#-moz-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#-o-keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
#keyframes pageExitRight {
from {
right: 40px;
opacity: 1;
}
to {
right: -440px;
opacity: 0;
}
}
/* ANIMATION SETTING */
#hat {
-webkit-animation: pageExitLeft 2s 1 forwards ease-out;
-moz-animation: pageExitLeft 2s 1 forwards ease-out;
-o-animation: pageExitLeft 2s 1 forwards ease-out;
animation: pageExitLeft 2s 1 forwards ease-out;
}
#sock {
-webkit-animation: pageExitRight 2s 1 forwards ease-out;
-moz-animation: pageExitRight 2s 1 forwards ease-out;
-o-animation: pageExitRight 2s 1 forwards ease-out;
animation: pageExitRight 2s 1 forwards ease-out;
}
<div class="box" id="hat">hat</div>
<div class="box" id="sock">sock</div>
The editor I use is Brackets. I have been trying to find a solution to the transition I am trying to do but couldn't find anything.I have tried to make the animations work and apparently the only place it works is in the website codepen.io I also tried to use it on jsfiddle.net still no difference.
I was just trying to create a simple border animation in CSS-3 , but somehow it seems to fail and not work FIDDLE HERE
CODE:
a {
display: inline-block;
margin-top: 4em;
padding: 2em 5em;
background: #eee;
color: #000;
position: relative;
/*width: 120%;*/
}
a:before {
content:'';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 5px;
display: block;
background: #c107b4;
}
a:hover:before {
-webkit-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-name: borderanim;
-o-animation-name: borderanim;
animation-name: borderanim;
}
#-moz-keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
#keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
Well if instead of using a custom animation, if i do the following :
a:hover:before {
width: 100%;
left: 0;
right: 0;
-webkit-transition: width 5s;
-o-transition: width 5s;
transition: width 5s;
}
The border animation works(no keyframes used here though.), it works , but there is glinch. I'd prefer a keyframe animation. Can anybody tell me what am i doing wrong ?
Thank you.
Alex-z.
Must assign animation duration to see the change
in your case it animation in 0.0s. Must assign some time to see animation e.g
tag-name
{
animation-name:animate;
animation-duration:2s;
}
#keyframes animate
{
from{background:black;}
to{background:white;}
}
you can use -webkit-animation instead of -webkit-animation-name and give some animation duration.
DEMO
a:hover:before {
-webkit-animation: borderanim 5s;
-o-animation: borderanim 5s;
animation: borderanim 5s; }
I tried to put a "float:right" in the .skill_item_colored_main_wrap part. but it became such a mess. I think it has something to do with -webkit-animation part.
how can i modify it so it will transit from right to left?
.shortcode_skill {
position:relative;
overflow:hidden;
}
.shortcode_skill:before {
position:absolute;
top:0;
left:27%;
margin:15px 0 0;
width:1px;
height:95%;
background:rgba(0, 0, 0, .1);
content:"";
}
.skill_item {
overflow:hidden;
width:100%;
}
.skill_item > span {
float:left;
padding:24px 4.7% 0 0;
width:25%;
text-align:right;
}
.skill_item_colored_main_wrap {
float:left;
padding:15px 0 5px;
width:70%;
}
.skill_item_colored_wrap {
position:relative;
height:33px;
}
.skill_item_colored {
position:absolute;
width:100%;
height:100%;
-webkit-animation:move 2s linear .1s normal none 1 ;
-moz-animation:move 2s linear .1s normal none 1 ;
-ms-animation:move 2s linear .1s normal none 1 ;
-o-animation:move 2s linear .1s normal none 1 ;
animation:move 2s linear .1s normal none 1 ;
}
#-webkit-keyframes move {
from {width:0;}
to {width:100%;}
}
#-ms-keyframes move {
from {width:0;}
to {width:100%;}
}
#-o-keyframes move {
from {width:0;}
to {width:100%;}
}
#keyframes move {
from {width:0;}
to {width:100%;}
}
.skill_item_colored_wrap > span {
position:relative;
display:block;
}
.skill_item_colored > span {
display:block;
padding:8px 10px;
text-align:right;
-webkit-animation:opacity 2.5s linear .1s normal none 1 ;
-moz-animation:opacity 2.5s linear .1s normal none 1 ;
-ms-animation:opacity 2.5s linear .1s normal none 1 ;
-o-animation:opacity 2.5s linear .1s normal none 1 ;
animation:opacity 2.5s linear .1s normal none 1 ;
}
#-webkit-keyframes opacity {
0% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes opacity {
0% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes opacity {
0% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes opacity {
0% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
#keyframes opacity {
0% {opacity:0;}
90% {opacity:0;}
100% {opacity:1;}
}
<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
<span>95%</span>
</div>
</div>
</div>
</div>
A quick and easy way to do this would be to rotate the parent element 180deg and then rotate the child element negative -180deg.
Assuming you want the text aligned to the left, I added text-align: left. Omit that if you want it aligned to the right.
.skill_item_colored_wrap {
transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
text-align: left;
transform: rotate(-180deg);
}
.skill_item_colored_wrap {
transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
text-align: left;
transform: rotate(-180deg);
}
.shortcode_skill {
position: relative;
overflow: hidden;
}
.shortcode_skill:before {
position: absolute;
top: 0;
left: 27%;
margin: 15px 0 0;
width: 1px;
height: 95%;
background: rgba(0, 0, 0, .1);
content: "";
}
.skill_item {
overflow: hidden;
width: 100%;
}
.skill_item > span {
float: left;
padding: 24px 4.7% 0 0;
width: 25%;
text-align: right;
}
.skill_item_colored_main_wrap {
float: left;
padding: 15px 0 5px;
width: 70%;
}
.skill_item_colored_wrap {
position: relative;
height: 33px;
}
.skill_item_colored {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: move 2s linear .1s normal none 1;
-moz-animation: move 2s linear .1s normal none 1;
-ms-animation: move 2s linear .1s normal none 1;
-o-animation: move 2s linear .1s normal none 1;
animation: move 2s linear .1s normal none 1;
}
#-webkit-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#-ms-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#-o-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
.skill_item_colored_wrap > span {
position: relative;
display: block;
}
.skill_item_colored > span {
display: block;
padding: 8px 10px;
text-align: right;
-webkit-animation: opacity 2.5s linear .1s normal none 1;
-moz-animation: opacity 2.5s linear .1s normal none 1;
-ms-animation: opacity 2.5s linear .1s normal none 1;
-o-animation: opacity 2.5s linear .1s normal none 1;
animation: opacity 2.5s linear .1s normal none 1;
}
#-webkit-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
<span>95%</span>
</div>
</div>
</div>
</div>
As an alternative, you could also set direction: rtl on the .skill_item element, and then set the .skill_item_colored_main_wrap element's display to inline-block and remove float: left:
.skill_item {
overflow: hidden;
width: 100%;
direction: rtl;
}
.skill_item_colored_main_wrap {
display: inline-block;
}
.skill_item {
overflow: hidden;
width: 100%;
direction: rtl;
}
.skill_item_colored_main_wrap {
display: inline-block;
}
.shortcode_skill {
position: relative;
overflow: hidden;
}
.shortcode_skill:before {
position: absolute;
top: 0;
left: 27%;
margin: 15px 0 0;
width: 1px;
height: 95%;
background: rgba(0, 0, 0, .1);
content: "";
}
.skill_item > span {
float: left;
padding: 24px 4.7% 0 0;
width: 25%;
}
.skill_item_colored_main_wrap {
padding: 15px 0 5px;
width: 70%;
}
.skill_item_colored_wrap {
position: relative;
height: 33px;
}
.skill_item_colored {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: move 2s linear .1s normal none 1;
-moz-animation: move 2s linear .1s normal none 1;
-ms-animation: move 2s linear .1s normal none 1;
-o-animation: move 2s linear .1s normal none 1;
animation: move 2s linear .1s normal none 1;
}
#-webkit-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#-ms-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#-o-keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes move {
from {
width: 0;
}
to {
width: 100%;
}
}
.skill_item_colored_wrap > span {
position: relative;
display: block;
}
.skill_item_colored > span {
display: block;
padding: 8px 10px;
text-align: right;
-webkit-animation: opacity 2.5s linear .1s normal none 1;
-moz-animation: opacity 2.5s linear .1s normal none 1;
-ms-animation: opacity 2.5s linear .1s normal none 1;
-o-animation: opacity 2.5s linear .1s normal none 1;
animation: opacity 2.5s linear .1s normal none 1;
}
#-webkit-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
<span>95%</span>
</div>
</div>
</div>
</div>
Here an alternative,
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" style="width:95%%;"></div>
</div>
And add this to your CSS
.progress-middle .progress-bar {
position: relative;
}
.progress-right .progress-bar {
float: right;
}
What we did here is make sure the position is relative then float the progress-bar to right instead of left.