Constant Animation

[ts]

I am having trouble getting the heart (only on mobile) to pulse, here is the code:

<i class=”fas fa-heart gold appear-animation” data-appear-animation=”pulse” data-appear-animation-delay=”0″ data-appear-animation-duration=”1s”></I>

I believe this should make it pulse for 1 second but I would like to to pulse indefinitely. How can I do that?

---

[Support]

Hello,

You need the CSS property animation-iteration-count: infinite;.

You can add this directly on HTML:

<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
	<i class="fas fa-heart gold appear-animation" data-appear-animation="pulse" data-appear-animation-delay="0" data-appear-animation-duration="1s" style="animation-iteration-count: infinite;"></i>
</button>

Hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[ts]

It’s not working. It’s not animating at all on my end. Please advise.

---

[ts]

(Uploaded the latest version to the link I provided)

---

[ts]

I’m sorry, it just doesn’t work on iOS Safari. Please advise.

---

[Support]

Hello,

Please try with this new code:

<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
	<i class="fas fa-heart gold appear-animation" data-appear-animation="pulse" data-appear-animation-delay="0" data-appear-animation-duration="1s" style="animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;"></i>
</button>

* Note the new value with -webkit-.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[ts]

Nope, still does not work, in fact I don’t think it animates even once. When I go to the elements-animations.html page I am not seeing any animations on the iPhone’s Safari (iOS 14)

---

[Support]

Hello,

Oh I’m sorry. I saw now we are using the data-appear-animation plugin. By default the animations trough data-appear-animation are disabled on mobile. You can enable the animation on mobile with minWindowWidth option:

<button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
	<i class="fas fa-heart gold appear-animation" data-appear-animation="pulse" data-appear-animation-delay="0" data-appear-animation-duration="1s" data-plugin-options="{'minWindowWidth': 0}" style="animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;"></i>
</button>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[ts]

PS: http://preview.oklerthemes.com/porto/7.6.0/index.html – your template site is down.

---

[Support]

Hello,

We changed our server recently and the URL for our preview now is:
http://www.okler.net/previews/porto/8.1.0/index.html

Hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts