[Solved] Animation of flashing card

Ionic Framework ionic-v3
1

Hi community, I have look through ionic animate however, I don’t find anything can be flash/blink/flicker continuously. Any one have any guidance thankyou.

2

Hello,

maybe simple use of animate.css is a solution?

https://daneden.github.io/animate.css/

Best regards, anna-liebt

3

Hi, I tried and followed the step however, I am facing this error core.js:1350 ERROR Error: Uncaught (in promise): Failed to load animate.min.css

Thankyou

4

Hello,

use it like anyother css file.
Download css file, put it in your assetsfolder and reference it to app.sass.

in app.sass

@import '../assets/sass/animate';

and a little magic: in your assets/sass folder you rename the animate.css file to _animate.scss
The magic is the _

Use it like any other class

<div class='animated infinite bounce'>
<whatever></whatever>
</div>

Best regards, anna-liebt

5

Sorry, Yes, thankyou I have successfully inputed animation
However, How can I change the duration since I tried

#animated {
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 2s;
}

In my page2.scss file
P.S. I am not using jquery

6

Hello,

take a look to animate.css where duration is set, because it depends on which kind of animation. For globaly set it here or define your own or overwrite it from *.sass as any other css property.

Best regards, anna-liebt

PS: By the way: _ means for import that this file should not compiled.

7

Hello,
ahhhh now I understand, maybe.

To clarify. animate.css use ordinary css animation. There is no need to install it with npm. You can download as normal css file and you can implement it like any other external css file, for example putting it into an asset folder.
The jquery on the github page, which I have no experience (like any other web stuff) do the same you would like do when you grab an element in angular way.

Maybe it is now clearer, that animate.css is pure css.

Best regards, anna-liebt with the long line

8

Hello,
Thank you so much for the guidance.

The way I uses it is
FIrstly, I perform the npm install animate.css --save
Secondly, I inputed

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

into index.html
thirdly, I page2.html, and uses the class.

I tried to edit the animate.css file and even create my page2.scss file but it does not have any changes.

9

Hello,
if you installed it with npm, then I guess you should have it local in your npm-modules folder. So linking it to a extern cdn should not necessary.

animate.css is pure css.

So maybe it is worth deinstall it. Remove the link to the cdn.
Download the ordinary animate.css file and include it like above shown.
So now only one animate.css is in use.

If you use the normale file and not the minified version, than you can easy look into the css file. There you can see how all animations are implemented. Make here your changes. If it is working as expected you can redo it and move your changes to page2.css.

Best regards, anna-liebt