I have the following working but want the change to stick also when the field is no longer in focus.
I there any way of doing that within CSS?
.contact-field:focus ~ .label {
transform: translate3d(0px, -26px, 0px) scale3d(0.8, 0.8, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; opacity: 0.7;
}
</style>
CSS is intended for styling the page, not to change state. There are hacks that could do what you want to do, but in the end they will all fail one way or another depending on the browser environment.
It's much clearer (and more robust) to use JS for this:
document.querySelector('.contact-field').addEventListener('focus', () => {
document.querySelector('.contact-label').classList.add('visited')
});
I got a friend to help me out.
This did the trick:
$('.contact-field').on('focus', function(){
$(this).addClass('visited');
})
And then the CSS:
.contact-field:focus ~ .label-in-footer,
.contact-field.visited ~ .label-in-footer {
transform: translate3d(0px, -26px, 0px) scale3d(0.8, 0.8, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d; opacity: 0.7;
}
Related
I have a credit card component. It works when there is a hover effect, but does not work in the focus part (CCV) of the corresponding Input. How can I do it?
Component Full Codes:
https://codepen.io/veronicadev/pen/VXqZgR (not my codes)
HTML Element
<input-mask id="special-cvc-input" v-model="cardCvc" type="text" mask="999"></input-mask>
Working Hover CSS Codes
.card:hover .card__front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.card:hover .card__back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
Not Working Focus CSS Codes
#special-cvc-input:focus .card_front{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
#special-cvc-input:focus .card__back{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
Change
.card:hover .card__front
on
#special-cvc-input:focus + .card .card__back
I've tried everything I could find, but to no avail. I'm able to get the bootstrap modals to animate in however I like, but adjusting the "out" animation is not working for me. The modal starts to animate and then just vanishes in less than a second.
How do I change the behaviour of the modal dialogue so it can be animated as I choose?
Here's some example code that I've used:
/*Credit: http://hawkee.com/snippet/16154/ - modified by me*/
.modal.fade .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
top: 300px;
opacity: 0;
transition: all 1.5s;
}
.modal.fade.in .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform: translate3d(0, -250px, 0);
transform: translate3d(0, -250px, 0);
opacity: 1;
transition: all 1.35s;
}
It works just fine - except the "disappearing act".
I am trying to animate two images from the centre, the the opposite sides of each other.
One to the far left, and the other to the far right, with some text in the middle.
see jsFiddle
I have seen on a few websites now an is-visible css attribute (for example, something like this):
.image.is-visible {
left: 0%;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
.image {
background-position: right;
-webkit-transform: translateX(45%);
-moz-transform: translateX(45%);
-ms-transform: translateX(45%);
-o-transform: translateX(45%);
transform: translateX(45%);
I have my transform: translateY(0%); on my jsFiddle, but how do you add a class, for example: is-visible to animate it on the page?
Add Class is probably done by a jQuery
https://api.jquery.com/addclass/
So you just need to define when the class should be added
Maybe while scrolling
Example:
http://codepen.io/LukeD1uk/pen/zvGQZN
Or if the document is loaded
$( document ).ready(function() {
$(".someclass").addClass("is-visible");
});
I have a set of boxes where each box has an animation:
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(0); }
100% { transform: scale(1); }
}
In order to create a waving flag effect, I use the animation-delay CSS property:
.pulsate1 {
-webkit-animation-delay: 2s;
}
.pulsate2 {
-webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */
These pulsateN classes are wrapped around each row of boxes.
There is some occasional flickering using this method, as seen in this fiddle. Is there another better solution?
The flickering occurs because CSS doesn't know what to do with scale of 0. Change it to something low like 0.001 and enjoy your smoothly-waving flag :)
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0.001) translateZ(0) }
100% { transform: scale(1) translateZ(0) }
}
(As mentioned by skyline You can add translateZ(0) to take advantage of the GPU)
scale() is a 2D transformation style. Try adding translateZ(0) or translate3d(0,0,0) to the animation. This will trick the browser into thinking it's doing 3D transformations and will offload the work to the GPU if available. I'm not seeing any flickering on Chrome 49.
#keyframes pulse {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(0) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
Here's an article explaining the performance benefits of translate3d: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
i was wondering if these two set of statements are equivalent or not. i thought they were but they seem to be doing different things.
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform-origin:0% 100%;
and...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it seems that on the first set of statements, only the translateX gets performed and rotate does not. i changed the order around for the first set of statements to...
-webkit-transform: translateX(200px);
-webkit-transform: rotate(45deg);
-webkit-transform-origin:0% 100%;
and it seems to just perform the rotate and not the translateX. does it just do the latter one? however by writing...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it does both the rotate first and then the translateX. i thought this was supposed to just be a shorthand of writing it. is it not?
here is a link to the code. it's really simple.
http://jsfiddle.net/gCeUe/2/
thanks for the help! clear and thorough help would be much appreciated = )
CSS is parsed in a way so that the last statement is the only one that is rendered:
color: red;
color: green;
color: blue; /* This is what the color will be */
When you write your code like this:
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform is set to rotate(45deg) and then overwritten with translateX(200px).
This is the correct syntax:
-webkit-transform: rotate(45deg) translateX(200px);