How do I create rolling texture effect in css animation?-CodePudding

I have been trying to create an animation for my portfolio site where a roll of paper un ravels to reveal it’s content. I have most of it done but I’m having a trouble getting the textures on the back of the sheet to move in a way where it look like the paper roll is actually rotating instead of a straight bar moving accross the screen with an occasional pattern going accross.

Here is a link to the code pen:

https://codepen.io/JC2295/pen/qBKJJew

Any help would be greatly appreciated.

I have tried creating multiple divs with the backgrounds greater than that of its container and animating to try and make a continous pattern to make it look like its paper rotating.

CodePudding user response：

To create a rolling texture effect in a CSS animation, you can use the @keyframes rule and the background-position property. The @keyframes rule is used to define the animation, and the background-position property is used to move the texture across the element.

Here is an example of how you can create a rolling texture effect in a CSS animation:

@keyframes roll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.element {
  background-image: url('texture.png');
  animation: roll 5s linear infinite;
}

In this example, we have defined an animation named roll that moves the texture across the element from left to right. The animation property is used to apply the animation to the .element class, and the linear and infinite keywords are used to make the animation run smoothly and repeat indefinitely.

You can adjust the duration, timing, and direction of the animation by modifying the @keyframes rule and the animation property. For example, you can change the 100% keyframe in the @keyframes rule to move the texture from right to left, or you can change the 5s value in the animation property to make the animation run for a different duration.