I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.
:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
Related
I am trying to transition the content of a card in vue3. This code does not work as expected:
template>
<q-card class="q-pa-md">
<q-card-section>
<div class="fade text-h6 ">{{ props.article.title }}</div>
<q-separator inset></q-separator>
</q-card-section>
<q-card-section class="fade">{{ article.description }}</q-card-section>
</q-card>
</template>
<script setup>
const props = defineProps({
article: Object,
});
</script>
<style scoped>
.fade {
opacity: 1;
transition: opacity 1s ease-in-out;
}
But this code, involving keyframes does
toggled {
animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
don't mind the change of the class name. Could someone pin down the reasons for this behaviour. Thank you for your time.
I want the text to fade in and fade out in the loop never stop it. like, come fade in then out again and again with HTML CSS. I'm going to share with you my code which just does fade in not do fade out and loop also not so anybody sees my code and told me how I can do that with HTML OR CSS because I want to use this animated type text on WordPress website with one build on the Elementor page builder. so please help. Thank You
.fade-in {
animation: fadeIn ease 10s;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
Use animation-direction and animation-iteration properties.
Combined into a shorthand, you get a property like : animation: fadeIn infinite alternate ease 2s
Change duration as necessary
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
I used "animation-iteration-count: infinite" but it needs to be used of every line separately. I need it to be applied on all lines combined. My code uses separate CSS class for every line which is quite annoying. I need one single class to be applied on whole text no matter how many line or paragraphs there are. Below is my code.
.css-typing p {
font-family: "Courier";
font-size: 14px;
width: 200em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 2s steps(40, end);
animation: type 4s steps(40, end);
animation-iteration-count: infinite;
}
.css-typing p:nth-child(2) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 2s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 5s steps(40, end);
animation: type3 4s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes type {
from {
width: 0;
}
}
#-webkit-keyframes type {
from {
width: 0;
}
}
span {
animation: blink 1s infinite;
}
#keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="css-typing">
<p>
Typed <br> text 1
</p>
<p>
Typed text 2
</p>
<p>
Typed text 3
</p>
</div>
I think CSS animation is not the way to go.
If possible, you can actually write the characters to the browser from JS.
From the top of my head you should have:
Text in JS array. each element represents a line.
setInterval that calls a function that pops each time a line
another setInterval or setTimeout that will put each letter there, using substr and keep an index where you are at any given time.
If you don't want to code, google for codepen typing effect, I'm sure you will find something you will like.
I'm trying to get content to move across the screen but I was having trouble moving text with Bootstrap's carousel.
I have an animation working, but the divs sit on top of each other so they animate in and out of their own positions, not in and out of the same position.
Here's the CSS
/* Home and about pages */
#about-page {
transform: translateX(200%);
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
.slideInLeft {
transform: translateX(-200%);
animation: slideInLeft 1s forwards;
}
.slideOutRight{
transform: translateX(200%);
animation: slideOutRight 1s forwards;
}
.slideInRight {
animation: slideInRight 1s forwards;
}
/* Slide in from the left */
#keyframes slideOutLeft {
0% { transform: translateX(0%); }
100% { transform: translateX(-200%); }
}
#keyframes slideInLeft {
0% { transform: translateX(-200%); }
100% { transform: translateX(0%); }
}
#keyframes slideOutRight {
0% { transform: translateX(0%); }
100% { transform: translateX(200%); }
}
#keyframes slideInRight {
0% { transform: translateX(200%); }
100% { transform: translateX(0%); }
}
which is triggered by the following JavaScript
$(function() {
// Go to home
$("#home-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#about-link').removeClass('active');
// Slide in homepage
$('#home-page').removeClass('slideOutLeft');
$('#home-page').addClass('slideInLeft');
// Slide out about page
$('#about-page').removeClass('slideInRight');
$('#about-page').addClass('slideOutRight');
$('#about-page').addClass('hidden');
});
// Go to about slide
$("#about-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#home-link').removeClass('active');
// Slide out homepage
$('#home-page').removeClass('slideInLeft');
$('#home-page').addClass('slideOutLeft');
$('#home-page').addClass('hidden');
// Slide in about page
$('#about-page').removeClass('slideOutRight');
$('#about-page').addClass('slideInRight');
});
});
You can see the problem at testing version of the site here.
Thanks for all of your help and advice.
First add a class item in your page containers
<div class="inner cover">
<div id="home-page" class="item">
<!-- content -->
</div>
<div id="about-page" class="item">
<!-- content -->
</div>
</div>
Add this block in your css
.inner.cover {
position: relative;
overflow: hidden;
height: 200px;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
It's like the animation they have on npm front page and also on the brown hackathon page. Where a piece of text erases and appears every few seconds with different content. I think There may be an existing template for it online, but what do they call it?
This is basic idea how to create this kind of animation check following snippet:
If you want to expend this animation just add letters in array.
$(function() {
var arr = ['t','te','tex','text','G','Go','Goo','Goog','Googl','Googl','Google'];
var elem = $('#ani');
var i = 0;
var loop = function(){
elem.text(arr[i++]);
if(i>arr.length) {
//clearInterval(intervalID);
i=0;
}
}
var intervalID = setInterval(loop, 500);
})
.test{
font-size:26px;
color:green;
}
.ani{
color:red;
}
.ani::after{
content:"|";
-webkit-animation: cursor-blink 0.8s linear infinite;
-moz-animation: cursor-blink 0.8s linear infinite;
-o-animation: cursor-blink 0.8s linear infinite;
animation: cursor-blink 0.8s linear infinite;
}
#-moz-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-o-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="test">
This is text
<span class="ani" id="ani">
Google
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>