I believe there used to be a similar .min file related issue in VS but that was fixed long time ago.
So following is the new CSS I've added and since then, every time I hit space bar to insert a new class in my html tags, it fails to load CSS list and crashes.
My CSS snippet is
/* ANIMATIONS */
/* spin animation*/
.glyphicon-spin-animate {
animation: spin .6s infinite linear;
-webkit-animation: spin .6s infinite linear;
-moz-animation: spin .6s infinite linear;
}
#-moz-keyframes spin {
from { -moz-transform:scale(1) rotate(0deg);}
to { -moz-transform: scale(1) rotate(360deg);}
}
#-webkit-keyframes spin {
from { -webkit-transform:scale(1) rotate(0deg);}
to { -webkit-transform: scale(1) rotate(360deg);}
}
#keyframes spin {
from { transform:scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
.alert-info.ng-enter {
-webkit-animation: fadeInDown 0.7s;
-moz-animation: fadeInDown 0.7s;
animation: fadeInDown 0.7s;
}
.alert-success.ng-enter {
-webkit-animation: fadeInDown 2s;
-moz-animation: fadeInDown 2s;
animation: fadeInDown 2s;
}
.alert-danger.ng-enter {
-webkit-animation: shake 1s;
-moz-animation: shake 1s;
animation: shake 1s;
}
.alert-info.ng-leave, .alert-success.ng-leave, .alert-danger.ng-leave{
-webkit-animation: fadeOutUp 1s;
-moz-animation: fadeOutUp 1s;
animation: fadeOutUp 1s;
}
.item-row.ng-enter, .item-exra-row.ng-enter{
-webkit-animation: fadeInLeft 0.7s;
-moz-animation: fadeInLeft 0.7s;
animation: fadeInLeft 0.7s;
}
.item-row.ng-leave , .item-exra-row.ng-leave{
-webkit-animation: fadeOutLeft 0.7s;
-moz-animation: fadeOutLeft 0.7s;
animation: fadeOutLeft 0.7s;
}
Can someone please point what is wrong in above CSS?
Thanks.
PS: Animations are defined in animate.css
my colleagues tell me this is a known problem with an earlier release of Web Essentials 2015, which is fixed in the latest release.
I solved the same problem:
when changing #keyframes in css file my Visual Studio Community 2013 crashes every 2nd, 3rd time.
I tried updating Web Essentials 2015 to .5 .. did not helped
I noticed that almost invisible icon of VS2013 on my Firefox, I disabled that 'Enable Browser Link' in VS2013 and it helped. It is near refresh browser button's dropdown menu in VS and uses SignalIR to refresh the page you edited.
Related
I have this form on plunker and a struggling with adding a fade animation.
What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to run (fadeInUp for example).
So the view will animate and then the content inside the view will animate, If somebody can help me with this I would really appreciate it.
my current animation is using the following keyframe animation:
#-webkit-keyframes slideOutLeft {
0% {
transform: scaleY(1) scaleX(1);
}
20% {
transform: scaleY(0.01) scaleX(1);
}
40% {
transform: scaleY(0.005) scaleX(0.5);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(0.005) scaleX(0.5);
opacity: 0;
}
}
#-webkit-keyframes slideInRight {
0% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
opacity: 0;
}
50% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
z-index: 1;
opacity: 0;
}
70% {
transform: scaleY(0.005) scaleX(1);
background: rgba(0,188,140,1);
opacity: 1;
}
100% {
transform: scaleY(1) scaleX(1);
}
}
Running on ng.enter and ng.leave
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease;
-moz-animation:slideInRight 2s both ease;
animation:slideInRight 2s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease;
-moz-animation:slideOutLeft 2s both ease;
animation:slideOutLeft 2s both ease;
}
EDIT 1:
I have updated the code here
using:
#form-views.ng-enter * {
-webkit-animation:fadeIn 2s both ease 3s;
-moz-animation:fadeIn 2s both ease 3s;
animation:fadeIn 2s both ease 3s;
}
#form-views.ng-leave * {
-webkit-animation:fadeOut 0.5s both ease;
-moz-animation:fadeOut 0.5s both ease;
animation:fadeOut 0.5s both ease;
}
And this is the animation:
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
The code appears and disappearing at the correct time but doesn't animate the opacity.
I would try adding separate animation for fadeIn/Out and using the css animation delay to trigger one after the other. E.G:
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
-moz-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
-moz-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
}
and i think you know what the fadeIn and fadeOut animations should be.
UPDATE:
Here's a plunker with the code working the way I believe you want it to work. In chrome at least. You'll need to use the correct prefixes/no prefixes to get it working in other browsers.
I've just set up a few css animations and everything is running smoothly in Chrome and Safari however Firefox doesn't appear to be playing nice.
The following code:
#clock-animation .hour {
-webkit-animation: anti-spin 30s infinite;
animation: anti-spin 30s infinte;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Appears to be displaying as:
#clock-animation .hour {
transform-origin: 50% 50% 0;
}
When viewed in Firebug and consequently the animation isn't playing.
I'm a tad confused as to why this is and nothing appears to be fixing it.
Here are the keyframes used too:
#-webkit-keyframes anti-spin {
100% {
-webkit-transform: rotate(-360deg);
}
}
#keyframes anti-spin {
100% {
transform: rotate(-360deg);
}
}
According to http://shouldiprefix.com/ the -moz prefix isn't needed for keyframes, animation or transform. Nor is the -webkit which is only needed for Chrome and Safari. Any help would be great.
Edit: Just to mention that the IDs and classes are part of an inline SVG file. I'm not sure if that is relevant or not?
Edit: Heres a link to a demo https://jsfiddle.net/0Lha6dfg/ (Works fine in Chrome / Safari but not in FF (36.0.1))
Make sure to write out your animation shorthand property in full, do not skip properties. Shorthand format from w3 specs:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Becomes:
div {
animation: example 5s linear 2s infinite alternate;
}
So in your example add the animation-delay:
animation: anti-spin 30s linear infinite;
Should be:
animation: anti-spin 30s linear 0s infinite;
Also watch out for typos, in some places you have "infinte" instead of "infinite".
I'm playing with some css transitions and setting a different animation-delay for dynamic elements so the css animations are staggered on the page.
Here is the animation
-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
animation: bounceInLeft .5s ease-in 0s backwards;
The actual animation is working fine on both ff and chrome but on firefox the animations are correctly delayed in intervals whereas on chrome all the animations happen instantly.
Here is the inline code. This works correctly on firefox
style="animation-delay: 1s;"
This does not work on chrome
style="-webkit-animation-delay: 1s;"
I have specified a delay in the animation rule but I thought that placing one inline would override it, which it does on firefox. Any ideas? Thanks
I just created a jsfiddle replicating you situation and it seems to be honoring the inline delay in chrome for me. Perhaps there is an issue elsewhere. Check out this fiddle, maybe it will help illuminate a separate issue. http://jsfiddle.net/vFKuu/
HTML
<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>
Javascript
#some-div
{
width:100px;
height:20px;
background:#f00;
font-family:Arial;
-webkit-animation: cssAnimation .5s ease-in 0s backwards;
-moz-animation: cssAnimation .5s ease-in 0s backwards;
-o-animation: cssAnimation .5s ease-in 0s backwards;
animation: cssAnimation .5s ease-in 0s backwards;
}
#keyframes cssAnimation {
from { transform: translate(50px); }
to { transform: translate(0px); }
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: translate(50px); }
to { -webkit-transform: translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform:translate(50px); }
to { -moz-transform: translate(0px); }
}
#-o-keyframes cssAnimation
{
from { -o-transform: translate(50px); }
to { -o-transform: translate(0px); }
}
I've found something weird. For some reason the only way the inline would override the style rule in chrome is if the animation-delay is a value that is not 0.
It works fine in firefox if the value is 0 just not chrome. I fixed it by changing the initial value of the delay to 1s then overriding it using inline styles.
I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/
I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn't like the following keyframes directives AT ALL why? I am set on html5 and css3.
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Here is the animation code;
.logotransitions img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 18s;
-moz-animation-direction: alternate;
}
Those are just the animation definitions... you still need to declare that your targeted elements use that animation :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite;
-moz-animation : cf3FadeInOut 1s ease infinite;
animation : cf3FadeInOut 1s ease infinite;
}
By the way, unless you're targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
-o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
-moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
-ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}
/*...*/
#-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 3 years ago.
I am attempting a simple transform on a shape in CSS (webkit specifically).
The animation runs as expected but upon completion the div will revert to its initial state.
Is there any way to have it remain in its final state?
Heres my CSS thus far:
#-webkit-keyframes rotate-good {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-90deg);
}
}
#-webkit-keyframes rotate-bad {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
}
}
#good-arrow
{
-webkit-animation-name: rotate-good;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
#bad-arrow
{
-webkit-animation-name: rotate-bad;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
A briefer way to do this is to add:
-webkit-animation-fill-mode: forwards;
which retains the final keyframe state.
Update: full cross browser
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
the cross-browser solution is:
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
What Madara Uchiha comments above is not always possible for one reason: Imagine instead of starting the animation right away (animation-delay:0s) you want 10 sec of delay before it starts. If so, you would see the final state of your animated element for 10 sec, and then the animation would take it to de 0 keyframe to 100 keyframe transition, but always you are seeing for 10 seconds the ending state.
Oh, that's easy, simply set all the css rules to the finishing result.
Example