We Keep Coding

How to apply a hover effect on an element which has already been handled by an forward animation?

I have a text and block in an animation of an SVG element.
Here in my example i simplified everything.
I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.
Any suggestions on how to work around on this one?
I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.
Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
codepen.io link (same code as above): https://codepen.io/jdickel/pen/xJbQrY

Instead of a forwards animation, you can simply set the initial opacity to 0.3.
EDIT:
I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:
.text{
font-weight: bold;
/* Start out at 0.3 */
opacity: 0.3;
transition: all .8s;
/* 2s + 3s = 5s */
animation: showText 5s ease-in-out; /* no forwards */
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
/* Note the new animation keyframe locations */
70% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>

First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>

How to remove scrollbar which is shown on using transform scale?

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>

Jquery dlmenu animation is not smooth

I have created multilevel navigation menu using jquery dlmenu plugin v1.0.2 demo2.
Everything works fine, except CSS3 menu navigation is not smooth as jQuery left/right slide functionality is.
Is there any solution to resolve this issue without changing plugin?
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimOut2 0.3s ease-in-out forwards;
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimOut2 {
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
#-moz-keyframes MenuAnimOut2 {
100% {
-moz-transform: translateX(-100%);
opacity: 0;
}
}
#keyframes MenuAnimOut2 {
100% {
transform: translateX(-100%);
opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimIn2 0.3s ease-in-out forwards;
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
#-moz-keyframes MenuAnimIn2 {
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
#keyframes MenuAnimIn2 {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}

You have to use the plugin like this : with animationClasses "in" and "out" not "classin" and "classout"
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
});
});

css3 transition start on click

I want a CSS3 transition to start after click.
Now it works fine if the element gets added a class with jQuery (see span.toggle-nav.two) which knows then what to do.
I've tried with :focus (see span.toggle-nav.one) but that doesn't work. How can I make it work without jQuery?
Please have a look here: http://jsfiddle.net/aE4C7/ clicking on Two works but clicking on One does not.
<span class="toggle-nav one">One</span>
<span class="toggle-nav two">Two</span>
<script type="text/javascript">
$('.toggle-nav.two').on('click',function(){
$(this).addClass("click");
});
</script>
<style type="text/css">
.toggle-nav {
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
background-repeat:no-repeat;
width:50px;height:50px;
display:inline-block;
}
.toggle-nav.one:focus {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
.toggle-nav.two.click {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(180deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(180deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(180deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(180deg);}
}
</style>
Is there a way to make this work without jQuery?

To let span getting focus, you need to set tabindex attribute:
<span class="toggle-nav one" tabindex="-1">One</span>
Then you could wish for styling to set CSS outline property too:
outline: none;
DEMO

You can actually do this using purely CSS - The only way to correctly simulate click events in CSS is to fake it with a checkbox, otherwise using :active or :focus will stop any applied transition or animation as soon as the element loses focus, not when it is clicked on again.
Demo Fiddle
HTML
<div>
<input id='box' type='checkbox' />
<label for='box'>Click Me!</label>
</div>
CSS
div {
position:relative;
}
label {
position:absolute;
left:0;
background:white;
}
input[type=checkbox] {
opacity:0;
}
input[type=checkbox]:checked + label {
-webkit-animation: spin 0.6s infinite linear;
-moz-animation: spin 0.6s infinite linear;
-o-animation: spin 0.6s infinite linear;
-ms-animation: spin 0.6s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(180deg);
}
}

Responsive menu using trunk js how to make drawer to open right side

hey plz check this responsive menu i want to make the drawer to move right side but i have no idea about css animation can anyone suggest me what to do.
here is fiddle
i try to make the translate3d -240px the drawers move right but navigation is disappear.
header.open,
.content.open
{
-webkit-transform: translate3d(240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(240px,0,0);
animation: open .5s ease-in-out;
}

I needed this as well and made the necessary tweaks and now it works. Some of the changes below but check the fiddle for working code: http://jsfiddle.net/pkxtj9z1/
.burger {
float: right;
right: 10px;
}
nav {
right: 5px;
}
nav li {
text-align: right;
}
header.open,
.content.open
{
-webkit-transform: translate3d(-240px,0,0);
-webkit-animation: open .5s ease-in-out;
-moz-transform: translate3d(-240px,0,0);
-moz-animation: open .5s ease-in-out;
transform: translate3d(-240px,0,0);
animation: open .5s ease-in-out;
}
#-webkit-keyframes open {
0% {-webkit-transform: translate3d(0,0,0);}
70% {-webkit-transform: translate3d(-260px,0,0);}
100% {-webkit-transform: translate3d(-240px,0,0);}
}
#-moz-keyframes open {
0% {-moz-transform: translate3d(0,0,0);}
70% {-moz-transform: translate3d(-260px,0,0);}
100% {-moz-transform: translate3d(-240px,0,0);}
}
#keyframes open {
0% {transform: translate3d(0,0,0);}
70% {transform: translate3d(-260px,0,0);}
100% {transform: translate3d(-240px,0,0);}
}