Animating -webkit-clip-path using jQuery or CSS - javascript

at the moment I'm trying to use CSS animations to clip images when the user hovers over them. However, when moving from one image to the next because the images are clipped and the animation always starts at a specific keyframe, the animation looks jagged. I thought using the current value of the clip-path and animating it to the end position is a possible solution but that doesn't seem possible with just CSS. However, when I try to animate the clip-path using jQuery, it doesn't do it, and I'm not sure whether it's supported or not.
Does anyone have any advice?
Some of the animations are as follows and as they don't have the same 0% keyframe, the image jumps to 0% and animates from there.
#-webkit-keyframes "animation"
{
0%
{
-webkit-clip-path: polygon(25% 0%,100% 0%,75% 100%,0% 100%);
}
100%
{
-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
}
#-webkit-keyframes "animation2"
{
0%
{
-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
100%
{
-webkit-clip-path: polygon(25% 0%,100% 0%,75% 100%,0% 100%);
}
}
Thanks.

Related

How to make a bezel in CSS or vue

injection:
If there is some property in the CSS to create such an angle as in the layout
The program itself does not specify this property in the tab
I tried to search there
!:
You can simply use clip-path css property, and here is an example:
.square{
clip-path: polygon(80% 0%, 100% 20%, 100% 80%, 0% 80%, 0 0);
background-color:dodgerblue;
width:200px;
height:200px;
}
<div class="square"></div>
clip-path: polygon(80% 0%, 100% 20%, 100% 80%, 0% 80%, 0 0);
for more info about this property MDN clip-path

Make paragraph bounce

I have a paragraph that in my language says:
START A
NEW PROJECT
WITH US
I'd like to make this paragraph bounce. What's my best option here if I am not too advanced at coding? The current code used is:
<p><a href="linkhere">START ET<br>
<h4>NYT PROJEKT</h4><br>
MED OS</a></p>
By bounce I basically just mean some way of making the guy browsing the website notice it. There is stuff above and below it, so by it making some sort of a move it'd drag attention.
I know how to give the paragraph an ID, so for test purposes let's just assume the has the ID paragraphbounce.
This is the CSS I tried.
#keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.paragraphbounce {
animation-name: tada;
}
https://jsfiddle.net/ss9tvwje/
/* The animation code */
#keyframes example {
0% {top:15px}
33% {top:30px}
66% {top:40px}
100% {top:15px}
}
.parent {
position: relative;
}
/* The element to apply the animation to */
div.bounce {
animation: example 4s infinite;
position:absolute;
top:15px;
left:15px;
}
From the sounds of it you want to use CSS animation like in the (simple) example above.

CSS how to animate from the recently applied transform?

I am applying a dynamic transform to an element when dragging, for example:
HTML
<div style="transform: `translateX(${distance}px) translateY(-${distance / 10}px) rotate(-2deg) scale(0.9)`">
Drag Me
</div>
However when a certain distance has been reached I complete the animation by adding a custom class, say completeAnimation and the rules go like this:
#keyframes animation {
0% {
}
50% {
transform: translateX(270px) translateY(-50px) rotate(-15deg) scale(0.8);
}
100% {
transform: translateX(470px) translateY(50px) rotate(-15deg) scale(0.8);
}
}
.completeAnimation {
animation-duration: 1s;
animation-name: swipeRight;
animation-fill-mode: animation;
}
But obviously, when the class completeAnimation is applied to the class attribute it jumps back to its default display and directly complete to 100% in the animation css.
Is there a way to start the animation where the last applied style left off?

How to create a hand shake effect in png?

I have a png in which I want the hands to shake. I am providing the link to the image:
Please prefer using CSS, JS, HTML and jquery to do so:
http://i.stack.imgur.com/0YmwS.png
css is enough to achieve shake effect:
.handshake:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%, 90% {
transform: translate3d( 0, -1px, 0);
}
20%, 80% {
transform: translate3d(0, 2px, 0);
}
30%, 50%, 70% {
transform: translate3d(0, -4px, 0);
}
40%, 60% {
transform: translate3d(0, 4px, 0);
}
}
but to make it realistic you will need to animate the elements in the image itself. You could use program like Adobe Animate (former Flash) to export animated gif (which will btw. look far uglier and take much more space then the flash's primary export format swf).

CSS rotate and translate transform give unexpected results

I've checked CSS-TRICKS and any other site Google offered me up to page two of their list of links, so my only assumption is I'm misunderstanding how this works or doing it wrong.
What I want is for an image to slide in from its current position to the absolute center of the page. As it slides, I want it to rotate at its center, spinning like a perfectly-balanced wheel. As it slides and rotates, I want it to appear to come towards the user. I want to do this while still keeping the image flat and unskewed.
What it does instead is rotate the image clockwise around and down back towards the left side of the page and off of it.
Here's my code (borrowed from animate.css and changed to suit my needs):
#-webkit-keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
#keyframes rotOutZm {
0% {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
opacity: 0;
}
}
.rotOutZm {
-webkit-animation-name: rotOutZm;
animation-name: rotOutZm;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Currently, my code does not take into account the starting point of the image, which will be wrong/messy when I have a row of images. Is there a way to dynamically figure from their starting locations, if they need to slide up to the center, slide down to the center, etc? I'm pretty sure this is a job for JavaScript or jQuery but I'm not sure how to code that.
Am I simply expecting too much of the animation functions? Should I simplify my design to not do this due to complexity?
EDIT: Here is a JSFiddle showing the code in action. It's an image with a small delay to the animation so you can see the image and then watch how it animates to see my problem. My apologies for not providing this sooner.
JSFiddle
Sure you can do it:
FireFox Live example
#keyframes rotOutZm {
100% {
margin: -50px; /* image is 100x100px size so... */
transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
opacity: 0;
}
}
.rotOutZm {
transform-origin: center;
animation: rotOutZm 2s forwards 0.5s;
}
P.S: Expand the above also for -webkit- and other vendor prefixes
vw and vh are the Viewport sizes. 50vh is half the viewport height
Note that is extremly important the order you place your stack of transform, i.e: if you move translate3d to the end or the transform rule you might get unwanted results.

Categories

Resources