I am new to CSS3, so please ignore if you find this question silly.
I am working on animation, in which I have 4 list items, I need to move these list items upwards infinite times, and when one rotation completes, It goes back downwards and then starts animation but I need it continue from that point.
And second thing is I need to stop list item for 4 seconds, basically its a news ticker so i need like this one, I have tried and develop something but not what I want.
Here is my code:
HTML
<div class="news">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
CSS3
#keyframes ticker {
0% {
margin-top: 0
}
25% {
margin-top: -30px
}
50% {
margin-top: -60px
}
75% {
margin-top: -90px
}
100% {
margin-top: 0
}
}
.news {
width: 350px;
height: 32px;
overflow: hidden;
-webkit-user-select: none;
}
.news ul {
width: 350px;
padding-left: 10px;
animation: ticker 10s infinite;
-webkit-user-select: none;
}
.news ul li {
line-height: 29px;
list-style: none;
font-size: 10pt;
}
.news ul:hover {
animation-play-state: paused
}
.news span:hover+ul {
animation-play-state: paused
}
I have added it to the CodePen so that you can have better idea.
any suggestion in this will be really helpful !!
I have changed your way to handle the animation.
Now, I am animating each element separately, but reusing the same animation and setting different delays
#keyframes ticker {
0% {
transform: translateY(100%);
}
5%,
25% {
transform: translateY(0%);
}
30%,
100% {
transform: translateY(-100%);
}
}
.news {
width: 350px;
height: 32px;
overflow: hidden;
border: solid 1px green;
position: relative;
}
.news ul {
width: 350px;
padding-left: 10px;
}
.news li {
position: absolute;
top: 0px;
line-height: 29px;
list-style: none;
font-size: 10pt;
animation: ticker 8s infinite linear;
}
.news ul:hover {
animation-play-state: paused
}
.news li:nth-child(4) {
animation-delay: -2s;
}
.news li:nth-child(3) {
animation-delay: -4s;
}
.news li:nth-child(2) {
animation-delay: -6s;
}
<div class="news">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
Related
Hi I have a problem trying to getting the animation at the left hand side of the button when user mouse over the button. One of the example that explain as below:
HTML:
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
CSS:
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
position: relative; z-index:1;
transition: all 250ms ease;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
margin-right: 0;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
0% { margin-top: 0; }
15% { margin-top: 0; transform: rotateX(-50deg); }
30% { margin-top: 0; transform: rotateX(50deg); }
45% { margin-top: 0; transform: rotateX(-30deg); }
60% { margin-top: 0; transform: rotateX(30deg); }
75% { margin-top: 0; transform: rotateX(-30deg); }
100% { margin-top: 0; transform: rotateX(0deg);}
}
https://jsfiddle.net/9dwk8vzg/
Original link:http://dabblet.com/gist/5559193
But for this example is at the bottom instated of at the left hand side of the button, I tried using margin-right and padding-left still unable to get the mouse over appeal div tag to be on the right hand side, may I know what do I miss to get the div tag to appeal on the right hand side/
/**
* CSS3 balancing hover effect
* Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
*/
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
.block {
width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica;
position: relative;
perspective: 350;
}
.block .normal {
width: 100%;
background: gray; padding: 15px; cursor: pointer;
position:relative; z-index:2;
}
.block .hover {
width: 100%;
background: #00aced;
padding: 15px;
display: block;
position:absolute;
color: #fff;
text-decoration: none;
z-index:1;
transition: all 250ms ease;
right: -30px;
top: 0;
}
.block:hover .normal {
background: #0084b4;
}
.block:hover .hover {
right: 100%;
transform-origin: top;
/*
animation-name: balance;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-delay: 110ms;
animation-iteration-count: 1;
animation-direction: alternate;
*/
animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#keyframes balance {
15% { width: 95%; }
30% { width: 105%; }
45% { width: 97%; }
60% { width: 103%; }
75% { width: 97%; }
100% { width: 100%; }
}
<div class="block">
<div class="normal">
<span>Follow me...</span>
</div>
<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
on Twitter
</a>
</div>
So I am trying to animate the #txtName class and it's working fine. My problem is the .smallletters is set as <span> property inside the <h1> and I can't make it to start animating outside of the page just like The #txtName doing. It means When I refresh I already see the .smallletters and then the #txtName is coming and pushing .smallletters down.
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
animation-name: second;
animation-duration: 4s;
}
#keyframes Second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>
You can only animate top of positioned elements, so position your smallletters. Also your animation is Second (note the capital s)
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
animation-name: Second;
animation-duration: 4s;
position: relative;
}
#keyframes Second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>
Not sure what you want exactly, but you should change two or three things, depending on what you really want:
1.) Identical spelling of animation name ("second" vs. "Second"), 2.) position: relative for the span, 3.) display: inline-block for the span
#txtName {
font-size: 80px;
color: #ff6666;
text-transform: uppercase;
letter-spacing: 0.2em;
position: relative;
top: 300px;
animation-name: First;
animation-duration: 4s;
}
#keyframes First {
0% {
top: 10px;
}
50% {
top: 400px;
}
100% {
top: 300px;
}
}
.smallletters {
font-size: 40px;
letter-spacing: 0.5em;
display: inline;
position: relative;
animation-name: second;
animation-duration: 4s;
}
#keyframes second {
0% {
top: 0px;
}
100% {
top: 300px;
}
}
<header id="main-header">
<h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>
span tags are display: inline by default, and so will ignore positional instructions (margin, top, left etc).
Give it display: block or inline-block if you want to apply (or animate) these properties.
I'm trying to make a background image slideshow for my photography portfolio.
When each image fades in, I want it to link to its respective gallery.
I also have a text box that fades with the images. I would like to also link to the respective gallery. I have not added the code in for that yet as I do not know how without ruining all the code linked to the .
At the moment, no matter where I seem to put the links, they overlap and the bottom (link3) is only clickable.
My HTML:
<ul class="cb-slideshow">
<li>
<span><a id="gallerylink" href="link1"></a></span>
<div>
<h3>Fire & Light</h3>
</div>
</li>
<li>
<span><a id="gallerylink" href="link2"></a></span>
<div>
<h3>Live Music</h3>
</div>
</li>
<li>
<span><a id="gallerylink" href="link3"></a></span>
<div>
<h3>Water & Nature</h3>
</div>
</li>
</ul>
My CSS:
#gallerylink {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
z-index: 999;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
list-style-type: none;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 5%;
right:5%;
width: 10%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: 400;
letter-spacing: 2px;
padding: 0;
background-color: white;
line-height: 45px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(iamge1)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(image2);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(image3);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
5% { opacity: 1; animation-timing-function: ease-out; }
30% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
5% { opacity: 1 }
30% { opacity: 1 }
33% { opacity: 0 }
100% { opacity: 0 }
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 20px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 14px }
}
FYI I'm not taking credit for most of this code; its from: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
I realise the background-image and a href 's are not real links. I removed them so it would allow me to post this question with low reputation.
Here is the page in question if that helps: http://kalemhornphoto.format.com/
This particular site runs off Format, which takes care of my site theme (and code) hosting and backend, though my CSS and HTML overrides theirs.
Thanks in advance!
jQuery is one way:
// Go trough every li with #gallerylink inside
$("li #gallerylink").each(function()
{
// Bind click event to it
$(this).parent().on("click", function()
{
// Click the link if the li is clicked
$(this).find("#gallerylink")[0].click();
});
});
Hello I am trying to create HTML/CSS button with next idea:
To run sprite animation on hover with a p-text over it.
Problem:
Animation appears on hover, but doesn't work.
P-text is hided, but doesn't appears on hover.
Fiddle: jsfiddle.net/6xgt5ko1/6/
HTML:
<div>
<p class="follow">Follow</p>
</div>
CSS:
div a {
width: 128px;
height: 128px;
margin: auto;
display: block;
background: url('http://s29.postimg.org/4yqcgdcbn/128.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
div a:hover {
width: 128px;
height: 128px;
background: url('http://s10.postimg.org/alazhqpu1/sprite.png');
background-position: 0px 0px;
animation-play-state: paused;
animation: play 5s steps(10) infinite;
transorm: translateZ(0);
}
#keyframes play {
from { background-position:0px 0px; }
to { background-position: 1280px 0px; }
}
.follow {
font-size: 18px;
font-weight: 300;
line-height: 150px;
text-align: center;
color: white;
display: none;
}
.follow:hover {
display: block;
}
To fix the <p> text issue.
Change this CSS Rule:
.follow:hover {
display: block;
}
to this:
div a:hover .follow {
display: block;
}
1) You need -wekbit prefixes for the animations to work in Safari. Also you set animation-play-state: paused; so the animation doesn't run. Not sure why that doesn't affect Chrome.
div a:hover {
animation-play-state: paused; // get rid of this
animation: play 5s steps(10) infinite;
-webkit-animation: play 5s steps(10) infinite;
transorm: translateZ(0);
-webkit-transorm: translateZ(0);
}
#-webkit-keyframes play {
from { background-position:0px 0px; }
to { background-position: 1280px 0px; }
}
2) Like #hopkins-matt said, to see the <p> on hover change the css to
div a:hover .follow {
display: block;
}
I need to have span with text aligned in the center.
Previously I have used line-height for this purpose, but in this case the text for some items are longer and this doesn't work any more.
JSFiddle: http://jsfiddle.net/4jSdu/
HTML:
<ul>
<li><a><span>Short</span></a>
</li>
<li><a><span>Why Should I Monitor?</span></a>
</li>
</ul>
CSS:
ul {
position: relative;
overflow: hidden;
}
span {
background-color: rgba(216, 25, 11, 0.75);
display: block;
height: 70px;
line-height: 70px;
width: 135px;
color: black;
text-align: center;
/*margin: auto 0;*/
font-weight: bold;
font-size: 15px;
position: absolute;
bottom: 14px;
}
li, a {
width: 135px;
height: 100px;
display: inline-block;
}
EDIT:
I want to note that span element has value bottom: 14px. THere is also animate effect on this span. when page loads span has value bottom: -70px (container has overlfow: hidden,s o this span is not seen) and then it appears (using .animate) and goes to bottom: 14px. So the sollution should consider this.
I cannot get this animate effect working in jsfiddle (http://jsfiddle.net/pr5cL/), but it works on my page that is locally created.
$("ul li:not(.img_active)").mouseenter(function() {
$(this).find("span").css("bottom","-55px");
$(this).find("span").animate({bottom:15},500);
}).mouseleave(function(){
$(this).find("span").animate({bottom:-70},500);
});
Here is link: http://www.sheerdigitaltest.net/janus/
Something like this maybe?
span {
display: inline-block;
line-height:1.25;
vertical-align:middle;
width: 135px;
color: black;
text-align: center;
font-weight: bold;
font-size: 15px;
}
a {
background-color: rgba(216, 25, 11, 0.75);
height: 70px;
line-height: 70px;
font-size:0;
overflow:hidden;
}
li, a {
width: 135px;
display: inline-block;
vertical-align:top;
}
span {
-webkit-animation: slidein 2s ; /* Safari 4+ */
-moz-animation: slidein 2s ; /* Fx 5+ */
-o-animation: slidein 2s ; /* Opera 12+ */
animation: slidein 2s ; /* IE 10+ */
}
#-webkit-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-moz-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-o-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
Jsfiddle
No IE7 or earlier support. Animation support as per comments.