I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.
Here is a simplified example of the chat script:
http://jsfiddle.net/CF4pj/1/
<a class="click" href="#/">click</a>
<div class="stuff"></div>
<script>
$("a.click").click(function() {
$("div.stuff").append("<div class='lol'>text text text text text</div>");
});
</script>
Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?
Here you go...
div.click {
background:yellow;
display:inline;
}
div.lol {
padding:5px;
border:1px solid green;
margin:5px 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Check out this fiddle...jsfiddle
You could use something like this:
<code>
.lol {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
</code>
Related
I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I am new using javascript and CSS and am currently trying to make a small animation that is triggered at event call. The animation is simple, and only changes the transparancy of an image. My problem is that that the animation only works every other time the function is called.
A function called "pulse()" is called every time I want the animation to happen.
<script>
function pulse() {
$('.transform').toggleClass('transform-active');
}
</script>
The CSS looks like this:
.lock-image {
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-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;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
}
}
The image on which the animation is done is done like this;
<div class="lock-image transform">
<img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
</div>
How can I change the code so the animation happens every time the function pulse() is called?
You can add an event handler to handle when the animation ends to remove the class. For the purpose of the example, I've changed the image to a red div
function pulse() {
$('.transform').addClass('transform-active');
}
$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$(this).removeClass('transform-active');
})
#myImage {
display: block;
background-color: red;
width: 100px;
height: 80px;
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-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;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
<div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>
I want to have this effect, but not on the whole body background but just on the border of one of my div's. ( http://jsfiddle.net/ANMPt/ )
#-webkit-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-moz-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-ms-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
How do I target just the border?
Or: if anyone has a better solution to get an infinite loop of changing border colors in CSS or JavaScript: i am all ears :-)
Thanks!
You are applying it to the body! Do it for div
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/160/
But, if you say it is for border, do it for border-color not for background!
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/167/
Animate border-color instead of background:
#keyframes blink {
0% { border-color: red; }
50% { border-color: green;}
100% { border-color: red; }
}
body {
border: 15px solid;
animation: blink 1s infinite;
}
Some browsers may need vendor prefixes
Demo
http://jsfiddle.net/ANMPt/162/
Change it to border-color.
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 20px solid red; /* cant animate border without a border... */
height: 200px; / * for illustration purpose */
}
Apply it to the right property (border-color instead of background) and to the right element (it's better to use a class selector, so the effect can be applied to any element instead that only to divs).
Also don't forget to use (always as last) the default #keyframe syntax other than the prefixed ones.
Demo
HTML
<div class="animatedBorder"></div>
CSS
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
.animatedBorder{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
div.animatedBorder{
margin: 20px;
width: 100px;
height: 100px;
border: 5px solid transparent;
}
The FIX is Animating border-color instead of background
But if you need to add this effect to a div
simply add a divinside the body
then change the background in css to border-color property
DEMO
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:2px solid;
width:200px;
height:200px;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:solid 1px red;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Replace all occurrences of background with border-color and then use them on your div-element instead of the body.
You probably have to define a border for the div first (like #000000 1px solid) in order to animate it.
http://jsfiddle.net/ANMPt/165/
You need to change the style for the animation definitions:
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
And define a border for your div:
#myDiv{
height: 300px;
width:300px;
border-width:5px;
border-style:solid;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
I have an image map and when the user hovers over the map I want to fade-in a small div with informations on the hovered content, then upon the mouse leaving the map fade-out with a two second delay.
It's possible to do a fade effect by animating opacity using CSS transitions:
.small_div {
opacity: 0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.small_div.active {
opacity: 1
}
To use this class, you will need to have some javascript to add the .active class when the image map is hovered and fill the .small_div with the necessary data.
IF you don't want to use a class, you can just change the opacity property directly using javascript and that change will also be animated.
Note that this will not work in older browsers like IE8, but it should degrade gracefully.
Unlike nullability suggests, you can do this fully with only CSS including the delay, no added classes involved. Here is a fiddle to prove it
HTML:
<div id='map'>
<div id='overlay'></div>
</div>
CSS:
#map {
height:100px;
width:100px;
background:red;
}
#overlay {
z-index:2;
background:black;
height:100px;
width:100px;
opacity:0;
-webkit-transition: opacity 1s;
-ms-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
transition-delay: 2s;
-webkit-transition-delay: 2s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
I Currently have a CSS3 animation for Mouse Hover Event, see it below:
#topo .menu-header ul li:hover a {
-webkit-animation: menuanimate 0.3s linear 0s both;
-moz-animation: menuanimate 0.3s linear 0s both;
-o-animation: menuanimate 0.3s linear 0s both;
-ms-animation: menuanimate 0.3s linear 0s both;
animation: menuanimate 0.3s linear 0s both;
}
#-webkit-keyframes menuanimate{
50% {
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg); /* Safari and Chrome */
-moz-transform: rotateY(90deg); /* Firefox */
color: #353535;
background: url(images/bullets.png) no-repeat;
background-position: 3px 18px;
}
51% {
transform: rotateY(270deg);
-webkit-transform: rotateY(270deg); /* Safari and Chrome */
-moz-transform: rotateY(270deg); /* Firefox */
color: #fff;
background: #f15a25;
}
100% {
color: #fff; background: #f15a25;
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg); /* Safari and Chrome */
-moz-transform: rotateY(360deg); /* Firefox */
}
}
The Problem is: When the user move the mouse away from the button, there is no Animation for that. in CSS there is no mouse out event, so, is there a way to call an animation of Mouse Out like that in jQuery?
Thanks a lot in advance.
Can't you just call it with jQuery like:
$('element').hover(function(e)
{
$(this).css({"rollover animation css in here..."});
},function(e)
{
$(this).css({"rolloff animation css in here..."});
});
or even just have 2 classes ".over" and ".out" and then use $(this).addClass("over") & same for out on rolloff?