I am adding an animation to my ion-item as it is added to the list.
It works but the animation transition is not smooth as it should be when using chrome on PC or an Android device.
If I use the animation on a normal div (using background-color) it works as expected with the color slowly fading from blue to white.
However when using --background which you have to for ion-item it stays blue until the end then jumps to white.
It should look like the example here:
https://css-tricks.com/using-multi-step-animations-transitions/
Any suggestions on how to get this transitioning smoothly?
I am using Ionic 5
#keyframes highlight-add {
0% {
--background: #a8d8ea;
opacity: 0.3;
}
30% {
--background: #a8d8ea;
opacity: 1;
}
100% {
--background: #fff;
}
}
.student-item-animate {
-webkit-animation: highlight-add 5s;
animation: highlight-add 5s;
}
<ion-item *ngFor="let student of studentsBooked" [ngClass]="{'student-item-animate': student.isNew}">
Also on iOS the color change is ignored completely. Just the opacity is changed.
EDIT:
git repo here:
https://github.com/madmacc/Ionic5HighlightAnimation
Related
On loading state I have a #keyframes animation running.
#keyframes graph-line-loading {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
When I stop the animation graph__line jumps to translateY() value (set inline).
However the background-color does nicely animate.
I would expect transition property working on transform as well.
.graph__line {
transition-property: transform, background-color;
}
If the background-color is included in #keyframes animation it doesn't get transitioned on state change either.
Seems like whatever property is animated in #keyframes gets ignored by transition property even though #keyframes is added via different class.
Plz check the fiddle.
https://jsfiddle.net/LukaG/m4bzk6e3/
Any ideas?
I am trying to override WP Bakery's tab animations, which slides content vertically in and out of view. I am a front end designer with limited JS experience. The site runs a theme, but from what I can tell in the code, the tabs and animations are coded as Bakery components.
Just looking for some code to override this thing! Reference to this ability seems to be completely unavailable elsewhere from my research. Thanks!
I was able to remove the vertical animation from the visual composer bakery tab and pageable container components by using this CSS. I had to specify top and bottom css classes depending on the position of the tabs. This example is verbose to show how to over-ride the vertical animating on all popular browsers. Essentially you need to set transform and transition to none on the .vc_tta-panel-body. I wanted to add a custom fade in effect to the panels so I added the fadein animation to the same css classes below the transform and transition over-rides.
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panel .vc_tta-panel-body,
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-bottom .vc_tta-panel .vc_tta-panel-body {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-sand-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Found this CSS snippit via Google which states:
.vc_tta-panel.vc_animating {
opacity: 0;
}
This hides the vertical animation, am also looking for a JS fix.
On a Mac, if you hold the Shift key and perform an action that involves animation, it will slow down the animation. For example, hold Shift and minimise a window. This effect is described in various places (e.g. YouTube, Apple - StackExchange, The Unofficial Apple Weblog).
It would be nice to slow down CSS animations/transitions in a similar way. Is there a way to achieve this (apart from simply tweaking the animation-duration value in the CSS)?
You could combine some javascript and CSS to accomplish the effect on a consistent basis, meaning you won't have to go into your code anymore. Heres the code I tried:
function keydown(event){
if(event.which == 16) document.body.className = "slowmotion";
}
function keyup(event){
document.body.className = "";
}
if (window.addEventListener) {
window.addEventListener('keydown', keydown, false);
window.addEventListener('keyup', keyup, false);
} else if (window.attachEvent) {
window.attachEvent('keydown', keydown);
window.attachEvent('keyup', keyup);
}
And heres the CSS:
#keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
#-webkit-keyframes move {
0% {left: 0}
50% {left: 100%}
100% {left: 0}
}
body > div {
position: absolute;
background: red;
width: 50px;
height: 50px;
background: red;
-webkit-animation: move 4000ms infinite;
animation: move 4000ms infinite;
}
body.slowmotion * {
-webkit-animation-duration: 8000ms !important;
animation-duration: 8000ms !important;
}
And the HTML:
<div>MOVING</div>
What we're doing here is adding a class to the body to indicate we want our duration value overwritten. It will not do it immediately (in Safari it restart the animation) [EDIT: The animation does not get restarted, but gets recalculated (i.e. it reverts to where it would have been in if the other animation had been ongoing)], but it does allow for modification that way. You can even do it for elements with different speeds by doing .slowmotion #myElementID and amending the duration there. Make sure to always include the important, as the class is only triggered when the key is pressed and HAS to overwrite anyway.
Chrome and Firefox developer tools now support slowing down of many kinds of animations.
Chrome:
In the 'Styles' tab of DevTools, look for an 'Animations' icon that opens up the Animations Inspector. More info:
Chrome DevTools Animation Inspector
New animation controls in Chrome Canary
Firefox:
See documentation on working with animations
Goal is to keep the background red at the end of the animation.
Using chrome
http://codepen.io/JulianNorton/pen/RNqLZM
.animation {
-webkit-animation:test-animation 2s 2;
// Animation stops after a few seconds, state doesn't stay red.
}
#-webkit-keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
#keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
animation-fill-mode: forwards;
is most likely what you were looking for.
Source:
CSS Animation property stays after animating
Just set the background color of your .animation element to red. Since the keyframe animation is triggered automatically, it will not appear red at first, but white like you want.
I'm trying to get a css background color to fade out right after the page loads without any user interaction. Can this be done?
This can be done using CSS animations. There is a property animation-delay which can be set in seconds.
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
Here is a simple example of a background fading after 2 seconds: http://jsfiddle.net/eKAf2/
Personally I'd have the background set in CSS. Then modify the document with jQuery. So I'd set the background color
CSS
body {
background: #009dff;
}
Then set the background color that the page fades into, and add the transition
JS
$(document).ready(function() {
$("body").css("transition", "3s"); // Adding transition
$("body").css("background", "#fff"); //Background color to fade into
});
Plus here's a demo.
With pure JS you can use onload on the body and set up a function, then call it that way.
If you had an element eg: .elem
<div class="elem"></div>
Styles:
.elem {
width: 100px;
height: 100px;
background: red;
}
You could have a css class eh .nobackground that set the background to transparent with a transition.
.nobackground {
background: transparent !important;
transition: all 1s;
}
You could then apply this class to the element on page load with jquery.
$(document).ready(function(){
$(".elem").addClass("nobackground");
});
Heres a bin. Hope this helps.