I am getting parser error when I try to use CSS animations.
Server Error in '/' Application.
Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
Parser Error Message: "-" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.
<html>
<head>
.spin {
-webkit-animation: spin .2s infinite linear;
-moz-animation: spin .2s infinite linear;
-o-animation: spin .2s infinite linear;
animation: spin .2s infinite linear;
-webkit-transform-origin: 50% 58%;
transform-origin: 50% 58%;
-ms-transform-origin: 50% 58%; /* IE 9 */
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h1>
<h3 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h3>
<h6 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h6>
</body>
</html>
Add <style type="text/css"> just below the head tag and above your CSS code. It looks like you have the closing tag at the bottom already.
Related
i'm using Font Awesome in my Angular application and i'm trying to rotate a refresh icon when it's clicked.
<div class="col-5 d-flex justify-content-end">
<span class="mr-4 pr-3">
<fa-icon
style="color: white; font-size: large; top: 0;"
[icon]="faArrowAltCircleDown"
(click)="refreshTaskList()">
</fa-icon>
</span>
</div>
I've tried to add rotate="360" aswell as transform="rotate-90" but unfortunately all without any success.
I'm open for suggestions.
You can use CSS only for that, no Angular required:
button:focus i {
animation: rotate 1s ease-in-out 0s;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>
You could use above code and convert it so it fulfills to your desired results.
Source: Angular Button click rotate icon
Related question (Temani Afif's comment): Font Awesome 5 How to arrange different icons?
I'm playing around with bootstrap and trying to just get the icon spin with the text staying still but still inside the button tag.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'>Like</i></button>
</div>
remove text from the icon maker :)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
</div>
You can put the text outside the i tag
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
</div>
It's easy as this
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
And if you want your icons to spin in reverse while maintaining browsers' support use this
.fa-spin-reverse {
-webkit-animation: fa-spin-reverse 2s infinite linear;
animation: fa-spin-reverse 2s infinite linear;
}
#-webkit-keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Replace button code with this code :
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
Note: Always keep text outside from the i tag while using icons libraries
Using below code, I am able to highlight the element with value 2 and 3 instead of element 3. I tried using last child and nth-last-type but didn't work as expected. Issue is with highlighting immediate next element of class - active and apply blink to both tick mark of 3 and value 3 and change of active class to change blink
No Jquery solution, as currently trying to implement using CSS3
I am trying to choose first element of class hightlight without active class using CSS only
HTML:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
<tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
CSS3:
.highlight{
color:white;
width:20px;
height:20px;
border-radius:50%;
background: rgb(234,116,0);
display: inline-block;
text-align: center;
}
.active{
background:green;
}
#keyframes blink {
to { background: rgb(234,116,0); }
}
.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 1: Jquery
You can do it using jquery like so
$(".active:last").next().addClass("blink")
And change your css to have blink class
.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Working Js fiddle
Method 2:
If you want to do it only using css , you need to book keep your last element
by adding a class to the last element say .last
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active last">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
and then do you css like
.last + .highlight {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 3:
change your css to
div.active + div:not(.active){
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Basically it finds the element which has class active before it and the next class which does not have the class active.
working jsfiddle
Instead of nth-last-type you may use:
.highlight + .highlight:not(.active):nth-of-type(3) {
The snippet:
.highlight {
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(234, 116, 0);
display: inline-block;
text-align: center;
}
.active {
background: green;
}
#keyframes blink {
to {
background: rgb(234, 116, 0);
}
}
.highlight + .highlight:not(.active):nth-of-type(3) {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>1.</td>
<td><span>one</span></td>
</tr>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>2.</td>
<td><span>two</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>three</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>four</span></td>
</tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
I am trying to create a automatic scrolling div without javaScript, but currently it stops too early. I have my animation going down 100% but this isn't even close to the end.
Here is the CSS. The div is dynamic. Sometimes the div is really big with multiple span, sometimes its only a few, That's why I tried to use -100%.
.question{
-webkit-animation: moveDiv 25s linear infinite;
}
#-webkit-keyframes moveDiv {
from {margin-top: 60vh;}
to {margin-top: -100%;}
}
Here is my plnkr
https://plnkr.co/edit/c7TiOH5LgUiqWmbUzPdb?p=preview
This would be my quick answer for you:
#-webkit-keyframes moveDiv {
from {-webkit-transform: translateY(60px); }
to { -webkit-transform: translateY(calc(-100% - 200px));}
}
transform is the perfect property for animations. The percentage in transform takes the percentage of the element, whereas the percentage for margin refer to the width of the containing block (according to mozilla developer).
/* Styles go here */
#finish{
text-align:center;
}
#message{
margin-top:20px;;
color:green;
font-size:60px;
text-align:center;
}
#main{
margin:40px;
text-align:center;
}
#Questions{
/*overflow:scroll;*/
overflow:hidden;
height:50vh;
background:rgba(203, 203, 203, 0.44);
color:white;
margin-bottom:20px;
}
.question{
-webkit-animation: moveDiv 14s linear infinite;
}
.QDisp{
margin-top:2%;
font-size:50px;
color:rgb(70, 232, 77);
margin-bottom:6%;
text-align:center;
}
.ADisp{
text-align:center;
display: block;
background-color:rgb(255, 103, 98);
margin: 15px;
margin-left: 100px;
margin-right:100px;
border-radius:25px;
color:white;
font-size: 40px;
}
.IDisp{
margin-top:2%;
font-size:40px;
color:rgb(255, 150, 54);
text-align:center;
margin-bottom:400px;
}
#-webkit-keyframes moveDiv {
from {-webkit-transform: translateY(60px);}
to {-webkit-transform: translateY(calc(-100% - 200px));}
}
<div id="finish">
<div id="message">
Thank You, we really hope you enjoyed it!
</div>
<div id="main">
<div id="Questions">
<div class="question">
<span class="Qs">
<p class = "QDisp">1 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">2 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">3 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">4 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">5 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">6 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
<span class="Qs">
<p class = "QDisp">7 jihasdfjeoihfon ofidsicdsaofnewew diahoshfoow</p>
<span class = "ADisp">joiasfdioenwowe </span>
<p class="IDisp">Reflkfasjpwepjiqnpqk;ljrewjlfjejwlejklwwfjk} </p>
</span>
</div>
</div>
</div>
</div>
I use http://daneden.me/animate
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
for animations to work.
Look the html.
<div class="caption slideOne">
<div class="capionImage animated"></div>
<h1 class="captionTitle animated">Salty Spa <span class="captionSpan animated">Someseni</span></h1>
<div class="breakLine animated"></div>
<p class="captionParagraph animated">Terapii saline de inalta calitate si relaxare intr-o atmosfera placuta<br>alaturi de familia ta.</p><br><br><br>
Afla mai multe
</div>
How can I include all in animated class withouth put in every class "animated"
. slideOne * {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
<div class="caption slideOne">
<div class="capionImage"></div>
<h1 class="captionTitle">Salty Spa <span class="captionSpan">Someseni</span></h1>
<div class="breakLine"></div>
<p class="captionParagraph">Terapii saline de inalta calitate si relaxare intr-o atmosfera placuta<br>alaturi de familia ta.</p><br><br><br>
Afla mai multe
</div>
use this:
.slideOne * {
//csscode
}