I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()
Related
I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.
<div class="tm-scroll">
<span></span>
</div>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
Thanks for your help
You have to add scrollHelperFerro animation using keyframes like below
https://codepen.io/rohinikumar4073/pen/MWaeRMZ
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
,
}
}
<div class="tm-scroll">
<span></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="tm-scroll"><span></span></div>
</body>
</html>
here you define only animation-name, time, etc. but actual CSS animation code is following
animation: scrollHelperFerro 2s infinite ease-in-out;
add animation css:
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
I'm not used to develop much html outside premed templates and now I'm having an awesome opportunity to venture through this.
My Layout https://i.stack.imgur.com/hZJEM.png
I'm having the toughest days of my life tying to put the in codes. Could some good some give a starting point?
I still have no codes for this, I have bunch of codes for trial, but none of them could achieve what I want.
Is there anyone who could help me please?
here is an example of your image with skew column while running the snip will only show code , to see full example please download resources from download link
here is a live view of what is the result
and here is my code which been used for the skew :
position: absolute;
left: 27%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;
}
download
here an example of skew css code :
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
#import url("https://fonts.googleapis.com/css?family=Lato:300,800");
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: #f7720c;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #f7720c;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events: none;
}
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: #000000c7;
display: block;
transition: cubic-bezier(0.62,-0.79, 0, 1.71);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#menu .wrapper {
opacity: 0;
-webkit-transform: translate(0, 40px);
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
}
#menu .wrapper ul {
list-style-type: none;
text-align: center;
color: #fff;
}
#menu .wrapper ul li:first-child {
padding-top: 0;
}
#menu .wrapper ul li {
padding-top: 1.5em;
}
#menu .wrapper a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: #f3f3f3;
transition: color .3s ease-in-out;
}
#menu .wrapper a:hover {
color: #f7720c;
}
#menu.active {
-webkit-transform: translate(0, 0%);
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.box-with-text {
background-image: url('https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&h=700&q=75&w=1050');
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.box-with-text {
position: relative;
margin-top:50px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-repeat: repeat;
background-position: 50% 50%;
background-size: cover;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:95px;
font-family:Oswald, Impact;
}
.box-with-text-2 {
background-image: -webkit-linear-gradient(seagreen 50%, lightseagreen 80%);
background-repeat: repeat;
background-position: 0 0;
background-size: 100% 50px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
#-webkit-keyframes stripes {
100% {
background-position: 0 -50px;
}
}
#keyframes stripes {
100% {
background-position: 0 -50px;
}
}
.box-with-text-2 {
position: relative;
display:block;
margin-top:50px;
left: 50%;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:82px;
font-family: bold Open Sans, Impact;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
fill: none;
stroke-width: 6;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #F2385A;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #F5A503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #E9F1DF;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56D9CD;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3AA1BF;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
#-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
#keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
/* Other styles */
svg {
position: absolute;
left:0;
right:0;
width: 250px;
height: 250px;
margin:0 auto;
}
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:600,700,800,900' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/styletxt.css">
<link rel="stylesheet" href="./css/styletxt.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<style>
.bodybg {
font-family: helvetica, arial, sans-serif;
background-image: url(./background.png);
height: 90%;
width: 100%;
background-size: cover;
overflow: hidden;
z-index: 1;
background-repeat: no-repeat;
background-color: black;
position: absolute;
left: 0;
top: 5%;
box-shadow: -1px -3px 20px 0px #333333fa;}
.col {
background: #ddd;
width: 33%;
height: 100%;
float: left;
position: relative;
cursor: pointer;
-moz-transform: skew(-5deg, 0deg);
-webkit-transform: skew(-5deg, 0deg);
-o-transform: skew(-5deg, 0deg);
-ms-transform: skew(-5deg, 0deg);
transform: skew(-5deg, 0deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.col:first-of-type {
background: #fff;
margin-left: -50px;
padding-left: 50px;
}
.col:last-of-type {
background: #f7d00c;
margin-right: -50px;
padding-right: 50px;
}
.col:hover {
background: #900;
color: #fff;
}
.col-content {
position: absolute;
width: calc(100% - 40px);
bottom: 0;
padding: 20px;
text-align: center;
-webkit-transform: skew(5deg, 0deg);
-moz-transform: skew(5deg, 0deg);
-ms-transform: skew(5deg, 0deg);
-o-transform: skew(5deg, 0deg);
transform: skew(5deg, 0deg);
}
.col:first-of-type .col-content,
.col:last-of-type .col-content {
width: calc(100% - 90px);
}
}
#import url('https://fonts.googleapis.com/css?family=Lato:300,800');
$menu-bg-color: #f7580;
$content-color: #f7580;
$background-color: #f3f3f3;
$links: #f3f3f3;
body {
display: flex;
// flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: $background-color;
font-family: 'Lato', sans-serif;
}
div {
position: relative;
height: 60px;
width: 110px;
cursor: pointer;
}
span {
width: 110px;
height: 7px;
background: $content-color;
position: absolute;
transition: all .4s ease-in-out;
}
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: $content-color;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.one {
top: 50%;
right: 0;
width: 90px;
transform: translate(0%, -50%);
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%,-50%);
color: $content-color;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events:none;
}
// menu styling
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: $menu-bg-color;
display: block;
transition: all .3s ease-in-out;
transform: translate(0, -100%);
.wrapper {
opacity: 0;
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
ul {
list-style-type: none;
text-align: center;
color: #fff;
}
ul li:first-child {
padding-top: 0;
}
ul li {
padding-top: 1.5em;
}
a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: $links;
transition: color .3s ease-in-out;
&:hover {
color: darken($links, 25%);
}
}
}
}
#menu.active {
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
.menuinteract{
position:absolute;right:6%;top:4%;z-index:88888;height:100px; background-image:url("./menudisabled.png");
background-size:cover;
}
.menuinteract:hover{
position:absolute; right:6%; top:4%;z-index:88888;height:100px; background-image:url("./clicked.png");
background-size:cover;}
</style>
<script>
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
</script>
</head>
<body style="overflow:hidden;background-color:black">
<div class="menuinteract" "
<div>
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="text">MENU</span>
</div>
<nav id="menu">
<div class="wrapper">
<ul>
<li>About</li>
<li>Work</li>
<li>Journal</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div style="height: 100%;width: 100%;text-align:center;">
<div class="bodybg">
<div class="col" style="position: absolute;
left: 17%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;">
<div class="col-content">
</div>
<div style="position:absolute; top:5%;z-index:10000;">
<!-- animated txt here >
<svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- <svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- Duplicate symbols -->
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
</svg>
</div>
-->
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</html>
I'm trying to animate the second part of the sentence to change words. div box is the non-changing part, and div word is the changing part. Even though in every guide I've read, it says defining position as absolute and hiding overflow will fix the starting position of second part of the sentence, it still keeps changing. Here's my CSS:
body
{
margin: 0;
padding: 0;
background: #B4B8AB;
}
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px)
text-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.word
{
display: inline-block;
color: #e65c00;
}
.word span
{
position: aboslute;
top: 0;
overflow: hidden;
animation: animate 12s linear infinite 0s;
opacity: 0;
}
#keyframes animate
{
0%
{
opacity: 0;
transform: translateY(-50px);
}
2%
{
opacity: 1;
transform: translateY(0px);
}
15%
{
opacity: 1;
transform: translateY(0px);
}
20%
{
opacity: 0;
transform: translateY(50px);
}
80%
{
opacity: 0;
transform: translateY(50px);
}
100%
{
opacity: 0;
transform: translateY(50px);
}
}
.word span:nth-child(1)
{
animation-delay: 0s;
}
.word span:nth-child(2)
{
animation-delay: 2s;
}
.word span:nth-child(3)
{
animation-delay: 4s;
}
.word span:nth-child(4)
{
animation-delay: 6s;
}
.word span:nth-child(5)
{
animation-delay: 8s;
}
.word span:nth-child(6)
{
animation-delay: 10s;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tickets</title>
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<div id="menu">
<div class="logo">
<nav>
<img src="../images/mylogo.png" height="30" width="156" />
</nav>
</div>
</div>
<div class="box">
Sick of
<div class="word">
<span>wasting your time and money?</span>
<span>unreliable Ubers?</span>
<span>being stuck in traffic?</span>
<span>waiting in line?</span>
<span>sold out tickets?</span>
<span>logistical nightmares?</span>
</div>
</div>
</body>
</html>
Found the error on line 26 in the CSS
position: aboslute;
Change it to absolute and you are good to go ;)
Fiddle example here
Also, very cool effect!
New request
Figured it out. There was a missing ;
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px); /* <--- Right here */
text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}
New Fiddle example here
What can I do to avoid the image blurry/flickering issue when using CSS transform? I've tried a bunch of suggestions from CSS transition effect makes image blurry / moves image 1px, in Chrome?, but cannot seem to figure it out.
I've attached the plunker code below.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css
/* Styles go here */
.sectors {
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
}
.sectors__section__title {
font-size: 32px;
line-height: 48px;
}
.sectors-icon .sectors-icon-container{
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
opacity: 1;
transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
}
#keyframes floating_fixed_income {
0% {
transform: translate(0%,0%);
}
12.5% {
transform: translate(-2%,1%);
}
25% {
transform: translate(-4%,2%);
}
50% {
transform: translate(-2%,3%);
}
62.5% {
transform: translate(0%,2%);
}
75% {
transform: translate(1%,1%);
}
100% {
transform: translate(2%,0%);
}
}
.sectors-icon-container.fixed_income {
animation-name: floating_fixed_income;
animation-duration: 5s;
height: 112px;
background-size: 112%;
width: 112px;
margin-left: 73%;
margin-top: -11%;
}
I think it's a bug. Not as neat but my recommendation is to just go with animating an absolutely positioned element for now. You can position your sectors-icon where you want it, give it relative positioning and then add the hovering animation to it's child img with absolute positioning:
#keyframes floating_fixed_income {
0% {
top: 0;
}
12.5% {
top: 20px;
}
25% {
top: 10px;
}
50% {
top: 100px;
}
62.5% {
top: 50px;
}
75% {
top: 20px;
}
100% {
top: 0;
}
}
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
This is my simple code
http://jsfiddle.net/6hLf6/1/
when I open the jsfiddle on my IE, it is working perfectly.
but when I open the code locally, it looks like this:
I am using IE11
this is my css
#loading {
margin: 80px auto;
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #ccc;
font: 12px "Lucida Grande", Sans-Serif;
text-align: center;
line-height: 100px;
color: white;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#loading:before {
content: "";
position: absolute;
left: -20px;
top: -20px;
bottom: -20px;
right: -20px;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
background: #eee;
z-index: -2;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#loading span {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid rgba(255,255,255,0.7);
z-index: -1;
top: -28px;
left: 0px;
-webkit-animation: ticktock 5s linear infinite;
-moz-animation: ticktock 5s linear infinite;
animation:ticktock 5s linear infinite;
-webkit-transform-origin: 50px 80px;
-moz-transform-origin: 50px 80px;
transform-origin:50px 80px;
}
#loading strong {
overflow: hidden;
display: block;
margin: 0 auto;
-webkit-animation: expand 2.5s linear infinite;
-moz-animation: expand 2.5s linear infinite;
animation:expand 2.5s linear infinite;
}
#-webkit-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-webkit-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#-moz-keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
#-moz-keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes ticktock {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
-moz-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
#keyframes expand {
0% {
width: 0;
}
100% {
width: 60px;
}
}
I tried to handle the css on IE, that is why it is working on jfiddle but not when I run the code on localhost.
what should I do plesae?
Edit
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="loading.css"/>
</head>
<body>
<div id="loading"><strong>loading...</strong><span></span></div>
</body>
</html>
Using XHTML 1.0 strict the following HTML works with your CSS to provide the desired effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="loading">
<strong>loading...</strong>
<span></span>
</div>
</body>
</html>
Please compare the above code with the HTML you are using.
Edit:
I managed to replicate your error by enabling compatibility mode. Please click on the gear in the top right of internet explorer then click compatibility view settings and check your domain is not on the 'websites you've added to compatibility view' list if it is remove it from the list. Also un-check display intranet sites in compatibility view. Then try opening it.
You need to add:
<!DOCTYPE html>
At the top of your code otherwise the page will not be displayed using ie 11