I really love transition in html but i do not know how to do a transition with text or h2. I know for images as it is
img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
then
<img onload="this.style.opacity='1';" src="https://s13.postimg.org/6p9r8rtrr/fgh.jpg" style="width:640px;height:360px;"/>
The Problem is when i try this with h2 or text it doesn't work:
h2 {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
then
<h2 onload="this.style.opacity='1';">What Person/Character are you thinking of?</h2>
But this doesn't work. Can anyone help me?
Pictures take some time to load, but text doesn't have same behavior and onload isn't currently supported by text elements.
Check out CSS3 animation effects for elements on W3schools tutorial.
Snippet
h2 {
opacity: 0;
animation: fadein 2s forwards;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<h2>What Person/Character are you thinking of?</h2>
Related
I've got two classes, fade-item and fade. fade is nested in fade-item like this:
<a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) >
<div class='fade' *ngIf='item.active' >
<button class="botonete botonete--primary botonete--hero-one">
Button Text
</button>
</div>
</a>
When I hover over fade-item with mousemove, a value is set on the item so it shows using *ngIf='item.active', but it is supposed to do an opacity transition, which is not happening.
css code below:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover {
.fade{
opacity: 1;
}
}
Anyone knows what I am doing wrong?
The code you wrote it's scss. If you are looking for a css answer it should be like this:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover .fade{
opacity: 1;
}
When an element is dynamically added to the page, its styles are computed at that moment. For your transition to work, you would need it to have been already computed despite not actually existing yet.
Minimal example of it not working:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
opacity: 0;
transition: opacity 1s;
}
#hoverme:hover #fade {
opacity: 1;
}
<div id="hoverme">Hover me!</div>
Instead, you need to give it an animation that will begin when the element is added to the document.
Example:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
animation: fade-in 1s both;
}
#keyframes fade-in {
from {opacity:0}
to {opacity:1}
}
<div id="hoverme">Hover me!</div>
This is my first try with css3 animation. I'm trying to create a letter spacing animation in which the letters are closely spaced at first and then letter spacing increases. So far I've found a code which allows the spacing to happen on hover. How can I remove the hover and make the animation when the page opens.
Heres the fiddle http://jsfiddle.net/Lventbau/
and the code
p {
letter-spacing:-2px;
-webkit-transition: letter-spacing, 1s;
-moz-transition: letter-spacing, 1s;
-o-transition: letter-spacing, 1s;
transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}
You can accomplish it with css3 animations jsfiddle :
p {
letter-spacing:2px;
-webkit-animation: myanim 1s;
animation: myanim 1s;
}
#-webkit-keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
#keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
You can find animation documentation here
I have a nice animation set up so I have a bullet shooting a star that then rotates all after you hover over the gun, All works as it should but.......
After you take the mouse off the gun the star rotates the other way, Not good :( any ideas how to get it to stop?
I have tried to use 'active' instead but that doesn't work with an animation.
CSS
#star {
width:48px;
height:49px;
position:absolute;
z-index:5;
left:922px;
top:63px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
}
#gun:hover ~ #star {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
The nature of the :hover css selector is that it only applies when the hover is happening on the source element. So the reverse is triggered when the user no longer hovers because the :hover no longer applies. There are two ways to achieve what you want:
Use animations instead. Animations have animation-fill-mode, which when set to forwards causes an element to retain it's computed values set by the last keyframe encountered during execution. MDN has more info about it.
Here's how you'd do it in your CSS:
#gun:hover ~ #star {
-webkit-animation: rotate 4s forwards;
animation: rotate 4s forwards;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
Demo: http://jsfiddle.net/FPCMt/
If you don't want to use animations, you need to write some JavaScript. Use the hover event, because events don't depend on current state like :hover does. You will also notice I moved the transition-delay css to #star, as it can apply to that element the whole time to no effect. I've used jQuery for succinctness:
JavaScript:
$('#gun').hover(function() {
$('#star').css('transform', 'rotateZ(340deg)');
});
CSS:
#star {
width: 50px;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
-ms-transition: all 4s ease-out;
transition: all 4s ease-out;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1
}
Demo: http://jsfiddle.net/FPCMt/4/
--OR--
You can achieve this with vanilla JavaScript too. I used a CSS class I called shot to apply the transform, since we are lacking jQuery's cross-browser help and it is cleaner that way:
JavaScript:
var gun = document.getElementById('gun');
var star = document.getElementById('star');
gun.onmouseover = function () {
star.className = 'shot';
};
CSS: (in addition to CSS from jQuery example)
#star.shot {
-webkit-transform:rotateZ(340deg);
-moz-transform:rotateZ(340deg);
-o-transform:rotateZ(340deg);
-ms-transform:rotateZ(340deg);
transform:rotateZ(340deg);
}
Demo: http://jsfiddle.net/FPCMt/6/
You can simply specify different transition-delay for transition from non-hovered state to hovered and from hovered to non-hovered. Very large delay for the latter transition, e.g.
#star {
/*
other styles here
*/
transition-delay: 9999s;
}
will make the transition appear to be "one way". Here is the JSFiddle example.
I am using sprite image links for some of my menu items , positioning with background-position. I would like to make a fade effect in and out of the hover. I set up a
Demo http://jsfiddle.net/6q2hH/
<li class="mobileimg"></li>
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {background-position:0px -29px;}
First, you need to set the opacity of .mobileimage:hover to something less than 1. For cross-browser compatibility, try:
.mobileimage:hover {
filter: alpha(opacity=50);
-khtml-opacity: .5;
-ms-filter: "alpha(opacity=50)";
-moz-opacity: .5;
opacity: .5;
}
Then, to create an actual transition effect, you need to tell .mobileimage to create a transition on opacity instead of just switching to opacity: .5 immediately:
.mobileimage {
-webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
-moz-transition: opacity 500ms ease; /* FF4+ */
-ms-transition: opacity 500ms ease; /* IE10? */
-o-transition: opacity 500ms ease; /* Opera 10.5+ */
transition: opacity 500ms ease;
}
500ms is how long it takes for the opacity to change, and ease is the type of transition effect. See the updated fiddle.
Something like this? http://jsfiddle.net/6q2hH/3/
li.mobileimg .mobileimage{
display:block;
background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
width: 30px;
height:30px;
margin-top:9px;
margin-left:3px;
}
li.mobileimg .mobileimage:hover {
background-position:0px -29px;
-webkit-animation-name: fadingItOut;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes fadingItOut {
0% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
}
You can tweak the behavior based on your needs. Check Mozilla MDN for more info.
Also remember that this is only a WebKit example for Safari/Chrome/Chromium/etc. Other prefixes are (all animation tags need a prefix, this is only one example);
animation-name // Vanilla (general CSS)
-moz-animation-name // Firefox
-o-animation-name // Opera
-ms-animation-name // Internet Explorer
And for the frames;
#keyframes fadingItOut {
#-moz-keyframes fadingItOut {
#-o-keyframes fadingItOut {
#-ms-keyframes fadingItOut {
I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.
I would also like to change the speed but mainly I want to make it blink.
CSS animations to the rescue!
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
http://jsfiddle.net/r6dje/
You can make it a sharp blink by adjusting the intervals:
#keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
http://jsfiddle.net/xtJF5/1/
use setInterval method of Javascript use it as a reference of W3Schools and then change the css from visibility:visible to visiblity:hidden we will not use display:none as it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.
You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the code.
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out;
-ms-animation:blink normal 2s infinite ease-in-out;
animation:blink normal 2s infinite ease-in-out;