We Keep Coding

React CSS animation-delay property does not work

just a quick question regarding animated elements in React.js - I have noticed that when trying to make use of the animation-delay property in CSS, that React does not seem to apply this rule at all for some reason.
For example, I am trying to make a basic loading component, which just has a series of basic circles moving about in sequence, the CSS for which is below:
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
As far as I can tell, this should stagger each of the child elements in sequence, performing the same animation but at different times. However, for some reason, React simply plays the animation, with no delay whatsoever and has all four elements animate at the exact same time.
It seems like a really basic issue to be having and while I have looked up a variety of answers, I just can't seem to find any concrete solutions, so would be super appreciative for any help. Thanks!

If all four circles are seen, I think this animation should be working properly.
The negative animation-delay values ensures that four circles start at different points of the animation, rather than putting an actual delay.
More about animation-delay
Without it, they will start at same point and move together while stacking with each other, resulting in only one circle is seen (the last yellow circle since it's on top of stack).
Here is a basic example for testing the effect of animation-delay by toggling it on and off for all the circles, it can run with the "run code snippet" button below.
Hope it will help.
const btn = document.querySelector("button");
const loaders = document.querySelectorAll(".--loaderContainer");
btn.addEventListener("click", () => {
loaders.forEach((loader) => loader.classList.toggle("no-delay"));
btn.textContent = loaders[0].classList.contains("no-delay")
? "turn delay on"
: "turn delay off";
});
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
button {
text-transform: uppercase;
padding: 6px;
}
section {
width: 100px;
height: 100px;
position: relative;
}
div.--loaderContainer.no-delay:nth-child(n) {
animation-delay: 0s;
opacity: 0.8;
}
body {
background-color: #aaa;
}
<button>turn delay off</button>
<section>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
</section>

How to add scroll class to element and remove it when done

Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected.
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>

You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>

is it possible to animate a text inside a textbox

My UX guy come up with a requirement to animate a text inside a text-box. i have this animation css class, when applied to a text-box animates the text-box. Thats how it should be.
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
i have created an example for reference
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">
is is possible to animate only the text and not the text box itself. ??

Use CSS text-indent
.login-wrongPassword {
-webkit-animation-name: login-wobble-horizontal;
animation-name: login-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
text-indent: 8px;
}
33.3% {
text-indent: -6px;
}
49.95% {
text-indent: 4px;
}
66.6% {
text-indent: -2px;
}
83.25% {
text-indent: 1px;
}
100% {
text-indent: 0px;
}
}
<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">

Yes. Use padding-left instead of transform
/* Wobble Horizontal */
#-webkit-keyframes login-wobble-horizontal {
16.65% {
padding-left: 10px;
}
33.3% {
padding-left: 5px;
}
49.95% {
padding-left: 8px;
}
66.6% {
padding-left: 3px;
}
83.25% {
padding-left: 5px;
}
100% {
padding-left: 0;
}
}
JSFiddle
As Santi mentions, you can fix the right side by using 'box-sizing: border-box'

CSS tile flip on hover

I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?

Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.

Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>

For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>