I have following CSS for animating two separate elements:
.loading-icon,
.loading-icon-2{
height: 50px;
position: relative;
left: 50%;
top: 30%;
transform: translateXY(-50%, 50%);
}
.loading-icon {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: spin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
animation: spin 2s linear infinite;
}
.loading-icon-2 {
display: flex;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
animation-name: anotherspin;
animation-duration: 2s;
transition-timing-function: linear;
animation-iteration-count: infinite;
}
.loading-icon div,
.loading-icon-2 div {
margin: auto;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes anotherspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
The only difference is that for the loading-icon-2 class all the animation properties have been specified separately instead of using the shorthand style.
But both the elements are behaving differently. Could someone please help understand why this is happening or am I missing something here.
See the code working here at CodePen.
The difference is that you're using transition-timing-function: linear instead of animation-timing-function: linear. When you use the shorthand, though, it implicitly employs the correct property name, making the animation look continuous with no easing.
Related
I have this loader working fine.
CSS:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT
A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}
This counters the rotation and provides a roughly sane box in which other elements can be placed.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></div></div>
I want that the background animation I have set will start in delay.
Here is the fiddle link: Fiddle link
Here is the css code:
.loginButton {
width: 92%;
background: #ffffff;
border: 1px solid #4dbcb8 !important;
margin-top: 30px;
height: 42px;
line-height: 40px;
position: absolute;
top: 132px;
color: #14192f !important;
border-radius: 3px !important;
font-size: 12pt !important;
letter-spacing: 0.05em;
font-weight: 600;
}
.loginButton:hover {
color: #fff !important;
font-weight: 400 !important;
transition: background .7s ease-out;
background: linear-gradient(to right, #fff 50%, #4dbcb8 50%);
background-position: right bottom;
background-size: 200% 100%;
}
Just add a second time parameter as the delay time:
transition: background .7s .5s ease-out;
This will cause a 500ms delay.
Add this line to your .loginButton CSS:
animation-delay: 2s;
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Html
<div>
</div>
Please check this link:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay
I want to create a animation for a man playing drums(Dhol). So I cannot understand how to rotate hand end only on drum. Please see my Fiddle here
My html:
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>
My css:
.man_body {
position:absolute;
height:225px;
width: 137px;
background-image:url('http://i60.tinypic.com/2ag7uwk.png');
z-index:1;
}
.man_hand {
width:37px;
height:96px;
background-image:url('http://i61.tinypic.com/2ntfmdh.png');
position:absolute;
z-index:2;
left:30px;
top:65px;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; /* Just another timing function */
-webkit-animation-direction: alternate; /* Lets do in alternate fashion */
}
#-webkit-keyframes man_hand-rotate {
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(50deg);}
}
You would need to adjust the transform-origin point about which the rotation occurs. By default this is the center point of the element.
I've appoximated at:
transform-origin:center top;
but you can adjust this to suit.
Note: I've adjusted the position of the 'arm` slightly and set the rotattion to 15deg on both keyframes (as these were different in your original code).
.drumer {
position: absolute;
width: 100%;
height: 350px;
overflow: hidden;
}
.man_body {
position: absolute;
height: 225px;
width: 137px;
background-image: url('http://i60.tinypic.com/2ag7uwk.png');
z-index: 1;
}
.man_hand {
width: 37px;
height: 96px;
background-image: url('http://i61.tinypic.com/2ntfmdh.png');
position: absolute;
z-index: 2;
left: 33px;
top: 65px;
transform-origin: center top;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* Just another timing function */
-webkit-animation-direction: alternate;
/* Lets do in alternate fashion */
}
/* Chrome / Safari */
#-webkit-keyframes man_hand-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(15deg);
}
}
/* Old Firefox */
#-moz-keyframes man_hand-rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(15deg);
}
}
/* new Firefox & supporting broswers */
#keyframes man_hand-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(15deg);
}
}
.man_shadow {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
top: 227px;
box-shadow: -5px 10px 45px 2px #000000;
left: 7px;
position: absolute;
width: 136px;
}
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>
I am trying to upload the three blocks one by one and I want to make animation control the transform with the help of CSS3. Now what's happening is, it's working fine in google chrome (exactly the way I want) but it's not working fine in firefox. In firefox the three blocks are coming visible first and than the css3 animation starts working, which I don't want. I want the animation from the starting as its coming in google chrome.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.one {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: one 1s ease 1s;
-webkit-animation: one 1s ease 1s;
}
#keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes one {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.two {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 2s ease 2s;
-webkit-animation: two 2s ease 2s;
}
#keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes two {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.three {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
animation: two 3s ease 3s;
-webkit-animation: two 3s ease 3s;
}
#keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes three {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
<section class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</section>
There are several things you should change.
The first is that you should use a common class for all three since they're styled similarly and all having the same effect. I used a class called fadein (and also renamed the animation to this, though they don't need to match).
The second is that you can reuse the same animation for each, just use different animation-delays so that they're spaced out differently.
The third is that you need to have the initial state of all of them be scale(0) so that they don't show in FF. You can then use animation-direction:forwards to make sure they show after the animation as well.
Lastly, if you're going to use -webkit-keyframes, you should use -webkit-transform inside of that as well so that you get more browser support.
body {
font-size: 14px;
line-height: 18px;
font-family: arial;
}
.wrapper {
width: 960px;
margin: 10px auto;
}
.fadein {
float: left;
width: 100px;
height: 100px;
margin: 20px 0;
border: 1px solid #afafaf;
background: #ddd;
transform:scale(0);
-webkit-transform:scale(0);
animation: fadein 1s ease 1s forwards;
-webkit-animation: fadein 1s ease 1s forwards;
}
#keyframes fadein {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes fadein {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
.two {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.three {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
<section class="wrapper">
<div class="fadein one"></div>
<div class="fadein two"></div>
<div class="fadein three"></div>
</section>
I have a set of icons that transition from the center of the page to a set point, and then remain there. What I want to do is set them to transition to have a thicker border and scale to 130x130px whenever I mouse over one of them, but only the initial animation occurs
CSS:
.iconborder {
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
}
.iconborder:hover {animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;}
#keyframes icongrow {
0% {
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
}
}
#FTPSlideOut
{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;
animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes FTPSlideOut {
0% {
transform: translate(0px, 0px);
visibility: visible;
}
100% {
transform: translate(-300px, -150px);
visibility: visible;
}
}
And HTML:
<body style="background-color:#D4D4D4;height:100%;width:100%">
<img id="SlideUp" class="dropshadow" src="picCenterDotFinalwText.png">
<img id="FTPSlideOut" class="dropshadow iconborder" src="FTP.png">
<img id="PicturesSlideOut" class="dropshadow iconborder" src="Pictures.png">
<img id="VideosSlideOut" class="dropshadow iconborder" src="Videos.png">
<img id="MusicSlideOut" class="dropshadow iconborder" src="Music.png">
<img id="DocumentsSlideOut" class="dropshadow iconborder" src="Documents.png">
<img id="EmailSlideOut" class="dropshadow iconborder" src="Email.png">
</body>
Any clues?
Im not sure why are you using keyframes for just a simple hover animation.
You can use css3 transitions just for that animation
see demo
#-webkit-keyframes icongrow {
0%{
border-width: 5px;
width: 100px;
height: 100px;
}
100% {
border-width: 10px;
width: 130px;
height: 130px;
border-color:#ccc;
}
}
.iconborder{
text-align:center;
border: solid 5px #fff; /* use shorthand */
border-radius: 100em;
/* customize */
-webkit-transition : border 0.2s linear;
/*-webkit-animation-duration: 0.2s;*/
}
.iconborder:hover{
border: 10px solid #fff;
width: 130px;
height: 130px;
cursor:pointer;
/* -webkit-animation-name: icongrow;
-webkit-animation-fill-mode: forwards;*/
}
#-webkit-keyframes FTPSlideOutAnimate {
0%{
opacity:0;
-webkit-transform: translate(0,0);
}
100% {
opacity:1;
-webkit-transform: translate(-300px, -150px);
}
}
#FTPSlideOut{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
/* customize */
opacity:0.1;
-webkit-transition: -webkit-transform 1s ease-in,
opacity 0.5s linear;
}
#FTPSlideOut:hover{
-webkit-transform: translate(-300px, -150px);
opacity:1;
/*-webkit-animation: FTPSlideOutAnimate 0.2s linear;
-webkit-animation-fill-mode: forwards; */
}
http://jsfiddle.net/phcba/2/
in that fiddle you can uncomment the keyframes properties just to check and see how bad the animation it was when using Keyframes if not done right for your hover effect
Also im not sure how the #FTPSlideOut is position and displayed on your site, so I made it barely visible in that demo. Ive used Opacity instead of visibilty, you'll need to modify it in your case.
For more info about CSS3 transtions:
http://css-tricks.com/almanac/properties/t/transition/
cheers
Just put your animation in the class pseudo selector with the hover in it? like this
.clickMes {
color: white;
font-size: 17pt;
text-decoration: none;
}
.clickMes:active {
color: cyan;
}
.clickMes:hover {
animation: clickmes 1.3s infinite;
}
#keyframes clickmes {
0% {
background-color: none;
}
50% {
background-color: cyan;
}
100% {
background-color: none;
}
}