I have implemented a CSS3 Animation for a Div-Element which has Header text and "Read more"-link. I'm using translateX function to animate the container from left to right of the screen.
The problem is that the "Read more"-link which has an anchor goes to unclickable while the box animation. But when the animation ends the anchor becomes clickable.
Can anyone help me finding the problem behind this?
HTML
<div>
<h3>Title1</h3>
<p class="sub-text">Title1 Desc </p>
<p class="read-more">Read More</p>
</div>
CSS
div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 27%;
width: 62%;
text-align: left;
background: rgba(0,0,0, 0.6) none repeat scroll 0 0;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
div h3 {
font-family: 'Roboto', sans-serif;
font-size: 3em;
padding: 0 25px;
margin: 30px 0px 5px 0px;
color: rgba(255,255,255,0.8);
}
div p.sub-text {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
padding: 5px 25px;
color: rgba(255,255,255,0.6);
margin: 0px;
}
div p.read-more {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
padding: 10px 25px 20px;
}
div p.read-more a {
padding: 10px 10px 10px 20px;
display: inline-block;
background: rgb(223, 75, 20);
text-decoration: none;
color: rgba(255,255,255,0.6);
margin: 0px;
font-weight: 700;
}
titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(300%);
}
8% {
opacity: 1;
-webkit-transform: translateX(10%);
}
17% {
opacity: 1;
-webkit-transform: translateX(5%);
}
19% {
opacity: 0;
-webkit-transform: translateX(-10%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
Working Sample is
http://jsfiddle.net/a4enq/
Why would you want to try and click the link whilst its moving?
Anyway, I believe that this is the default browser behavior (Chrome) because when you are using translate(X,Y,Z,3d) it creates a new layer of the elements moving and repaints the element you're moving and make everything position: relative and disables all anchors until the animation has stopped.
You could use margins or left position for the animation (so at to manipulate the DOM and not the renderer)
This way it will work but it will lose hardware accelerated benefits
http://jsfiddle.net/L5tv8/1/
#keyframes titleAnimation {
0% {
opacity: 0;
margin-left:300%;
}
8% {
opacity: 1;
margin-left:10%;
}
17% {
opacity: 1;
margin-left:5%;
}
19% {
opacity: 0;
margin-left:-10%;
}
25% { opacity: 1 }
100% { opacity: 1 }
}
Related
I need do the next animation of text:
People dissapears like a flip effect David Walsh Flip Card Effect, and the effect faces every 2 seconds and it will be repeating, contents the text: "Robots", "Animals", "Things" for example, with the flip animation.
Any idea?
One example of flip cards is the next: Stackoverflow How to flip multiple divs using CSS?
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
.divi {
line-height: normal;
color: black;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
.div1 { /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */
animation: showup 7s forwards;
font-family:'Roboto';
font-weight:300;
font-size:28px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
}
.div2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
width: 0px;
animation: reveal 7s forwards;
animation-iteration-count: 1;
display: inline-block;
white-space: nowrap;
}
.div2 span {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
margin-left: -355px;
animation: slidein 7s forwards;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: auto;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
width: auto;
}
}
<div class="divi" align="center">
<div class="div1">Hello</div>
<div class="div2">
<span>People</span>
</div>
<div class="div3">
<span>Robots</span>
</div>
<div class="div4">
<span>Animals</span>
</div>
<div class="div5">
<span>Things</span>
</div>
</div>
I have an h2 header text with the class name "headertekst". I want to center it. I tried to use margin-left: auto, margin-right: auto and width: 100% but nothing happened.
I can give it a margin-left: 20% which will center it but that's just on my laptop. It will not be centered on other screen sizes and on mobile devices.
How do I center it the correct way?
You can just add style in h2 as:
<h2 style="text-align: center;">Text</h2>
h2.headertekst {
text-align: center;
}
<h2 class="headertekst">Test 1</h2>
You can use below css for this
h2 {
width: 100%;
text-align:center;
}
Or
header {
text-align: center;
}
h2 {
display: inline-block;
}
<h2 class="headertekst"> centered text </h2>
.headertekst {
{
text-align: center;
width:100%
}
This is all you need:
.headertekst {
text-align: center;
}
And if you need to center the h2 itself, then just add the text-align: center rule to the parent of the h2 tag.
add style as:
.headertekst{
text-align: center;
}
Here is a workign snippet:
.headertekst{
text-align: center;
}
<h2 class="headertekst">Align this to center</h2>
Ok, the problem is that the last part of your heading is rotating and position absolute. You have to define an approximate average width of the three rotating words.
body {
background: #363636;
}
.headertekst {
color: white;
font-size: 20px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
.headertekstrotate {
position: relative;
display: inline-block;
padding: 0 0 0 8px;
width: 150px;
}
.headertekstrotate span {
animation: clock 12s linear infinite 0s;
-ms-animation: clock 12s linear infinite 0s;
-webkit-animation: clock 12s linear infinite 0s;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.headertekstrotate span:nth-child(2) {
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
#keyframes clock {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<h2 class="headertekst">Interlaser is
<div class="headertekstrotate">
<span>professioneel.</span>
<span>voordelig.</span>
<span>betrouwbaar.</span>
</div>
</h2>
Other way:
body {
background: #363636;
}
.headertekst {
color: white;
font-size: 20px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
.headertekstrotate {
position: relative;
}
.headertekstrotate span {
animation: clock 12s linear infinite 0s;
-ms-animation: clock 12s linear infinite 0s;
-webkit-animation: clock 12s linear infinite 0s;
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
}
.headertekstrotate span:nth-child(2) {
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
#keyframes clock {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<h2 class="headertekst">
<div class="headertekstrotate">
<span>Interlaser is short.</span>
<span>Interlaser is very very long.</span>
<span>Interlaser is professioneel.</span>
</div>
</h2>
Try to something like this.
.headertekst{
left: 0;
right: 0;
width: 100%;
text-align: center;
}
<h2 class="headertekst">This is Heading</h2>
try this
.headertekst
{
text-align:center;
width:100%;
}
.headertekst
{
text-align:center;
width:100%;
}
<h2 class="headertekst">This is center text</h2>
Simply change the Css properties to this:
.headertekst {
width: 100%
display: inline-block;
overflow: hidden;
text-align: center;
}
Reason: Sometimes text-align does not works if there is no width set. And overflow should always be kept hidden in these cases. display: inline-block As its name says: it displays the element in a line in a block. And finally, text-align: center it aligns the text to center.
I have a webpage which has some css that makes an image appear from the left and move in slightly to the right. However this animation is done as soon as the page is loaded so it does not appear to move at all. I would like the animation to fire when the user scrolls down to the portion of the page where the image is located. How would I go about doing this? Here is my current code for the animation:
#-webkit-keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
#keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
.rotator{
text-decoration: none;
padding-right: 20px;
left: -10%;
position: absolute;
-webkit-animation: move 5s;
animation: move 5s;
}
.rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
and here is the html i put on the page:
<a class="rotator"><img src="img/lc.png" /></a>
Thanks in advance!
You could use JQuery to measure if the user has reached a certain point on the website. If so, then you should add a class which contains the animation.
JQuery:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
In the line if ($(document).scrollTop() == 200) is 200 equal to the y-coördinate of the element which should animate.
Example:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
body {
height: 2000px;
margin: 0px;
}
#block {
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border: 2px solid red;
margin: 200px auto;
}
.animate {
animation: spin 4s linear infinite;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="block">
Block
</div>
Your code doesn't render a animation... something is wrong there. I recommend you to find a piece of working code, and read it and adapt. For example this one, has a menu, but you can change all make it work for your purposes.
Check this example that works and re-use the code.
The menu bar slides down on page load, pure CSS.
header {
background: #666;
color: #fff;
height: 20px;
position: relative;
padding: 10px;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.5s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
display: inline-block;
margin-right: 20px
}
header ul li a {
color: #eee;
text-decoration: none;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
/* For aesthetics only */
body {
margin: 0;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.intro {
padding: 40px;
}
.intro h1 {
font: 200 1.7em Segoe UI, "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 200;
color: #666;
}
.intro p {
max-width: 600px;
}
<header>
</header>
<div class="intro">
</div>
I got this banner thingy from a tutorial, but the thing is, instead of the banner continuing in loops, it resets instead. I don't want to use any javascript since we we're not yet tackling it in uni. Can anyone point out where I did wrong and how to fix it? Thanks.
Here are the images:
[1]
[2]
and this is the code I used
HTML:
<div class="photobanner">
<img class="first" src="images/scroll/ban.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner1.png" style="width:350px;height:233px;"/>
<img src="images/scroll/banner3.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner4.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner5.jpg" style="width:350px;height:233px;"/>
</div>
</div>
CSS:
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background-image:url(images/banner1takuya.jpg);
background-size: cover;
background-attachment: fixed;
}
#container {
width:865px;
height:auto;
margin:auto;
padding:0 0 30px 0;
background-image:url(images/bg.png);
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
You have the .photobanner width set to 3550px, but the sum of images' widths is 355*5=1775px only.
You need to add 5 more images of the same size and this will work correctly.
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.